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本 书 循 序 渐进 地 对 jQuery 的 各 种 函数 和 方法 调用 进行 了 介绍 ， 读 者 可 以 系统 地 掌握 jQuery 的 选择 器 、DOM 
操作 、 事 件 和 动画 、AJAX 应 用 、 插 件 、jQuery Mobile 、jQuery 各 个 版 本 变化 、jQuery 性 能 优化 和 技巧 等 知识 点 ， 
并 结合 每 个 章节 后 面 的 案例 演示 进行 练习 ， 达 到 掌握 核心 知识 点 的 目的 。 

为 使 读者 更 好 地 进行 开发 实践 ， 本 书 的 第 8 章 将 前 7 章 讲 解 的 知识 点 和 效果 进行 了 整合 ， 打 造 出 一 个 非常 
个 性 的 网 站 ， 并 从 案例 研究 、 网 站 材料 、 网 站 结构 、 网 站 样式 和 网 站 脚本 等 方面 指导 读者 参与 到 项 目 建设 中 来 。 
本 书 适合 所 有 对 jQuery 技术 感 兴趣 的 Web 设计 者 和 前 端 开 发 人 员 阅 读 和 参考 。 
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非常 高 兴 地 告诉 大 家 : 《锋利 的 jQuery 第 2 版 》 出 版 了 。3 年 前 , 《锋利 的 jQuery》 问世 ， 它 不 
仅 增加 了 我 学 习 JavaScript 的 信心 ， 同 时 也 让 更 多 爱好 JavaScript 的 朋友 加 入 了 Web 开发 的 大 家 
庭 。 第 1 版 完全 是 个 人 爱好 的 结晶 ， 而 第 2 版 更 多 的 是 对 自己 3 年 来 技术 的 一 个 总 结 和 升华 。 


首先 ,我 要 向 广大 读者 道歉 出 版 社 一 直 找 我 出 第 2 版 , 但 我 的 时 间 确 实 安排 不 开 , 第 2 版 的 交 
稿 时 间 被 一 推 再 推 ， 心 中 也 不 禁 时 生 愧 意 。 


第 2 版 不 仅 在 内 容 方面 进行 了 更 新 ， 而 且 还 在 上 一 版 的 基础 上 做 了 大 量 的 修订 和 扩展 。 涵 盖 了 
如 下 几 个 方面 。 


例子 全 部 改 用 最 新 的 jQuery 库 。 

例子 使 用 了 全 新 的 UI， 并 且 代 码 更 符合 语义 化 。 
修订 了 上 一 版 已 发 现 的 所 有 印刷 错误 。 

增加 了 jQuery Mobile 的 章节 。 

增加 了 jQuery 版 本 变化 的 章节 。 

增加 了 jQuery 性 能 优化 和 技巧 的 章节 。 


相 比 之 下 , 第 2 版 的 内 容 又 扩充 了 不 少 ,其 中 最 让 我 高 兴 的 就 是 ， 第 2 版 中 新 增加 的 三 个 章节 
的 内 容 。 
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本 书 结构 





第 一 版 : jQuery 介绍 一 选择 器 一 DOM 操作 一 事件 和 动画 一 Ajax 应 用 一 插件 一 完整 DEMO。 
第 二 版 添加 : jQuery Mobile 一 jQuery 各 个 版 本 变化 一 jQuery 性 能 优化 和 技巧 。 


本 书 循序 渐进 地 对 jQuery 的 各 种 方法 和 使 用 技巧 进行 介绍 ， 读 者 可 以 系统 地 掌握 jQuery 中 关于 
DOM 操作 、 事 件 监 昕 和 动画 效果 、 表 单 操 作 、Ajax 以 及 插件 方面 的 知识 点 ， 并 结合 每 个 章节 后 面 
的 案例 演示 进行 练习 ， 达 到 掌握 各 章节 知识 点 ， 更 好 地 进行 开发 实践 的 目的 。 

本 书 共 分 为 11 章 。 

第 1 章 首 先 介 绍 了 JavaScript 以 及 各 种 JavaScript 库 的 作用 和 异同 ; 接 下 来 介绍 了 jQuery 以 及 
jQuery 的 优势 ; 之 后 介绍 了 如 何 配置 jQuery 环境 ,编写 简单 的 jQuery 代码 和 优化 jQuery 代码 的 风 


格 ， 最 后 对 jQuery 对 象 和 DOM 对 象 的 相互 转换 ，jQuery 和 其 他 库 的 冲突 这 两 个 常见 问题 进行 了 
详细 描述 。 此 外 ， 本 草 还 介绍 了 几 款 jQuery 的 开发 工具 和 插件 。 


















































本 章 是 全 书 的 基础 。 


第 2 草 的 重点 是 选择 器 。 首 先 介绍 了 jQuery 选择 器 以 及 选择 器 的 优势 ， 然 后 分 门 别 类 地 对 基 
本 选择 器 、 层 次 选择 器 、 过 滤 选 择 器 、 表 单 选择 器 以 及 使 用 每 种 选择 器 的 注意 事项 进行 了 详细 的 介 
绍 ; 最 后 通过 案例 研究 来 巩固 本 草 知 识 点 。 


本 童 是 学 习 jQuery 的 核心 基础 。 


第 3 章 的 重点 是 DOM 操作 。 首 先 介绍 DOM 操作 的 分 类 ， 然 后 通过 实例 详细 地 介绍 jQuery 中 的 
DOM 操作 以 及 利用 jQuery 简化 DOM 操作 的 方法 ， 最 后 通过 案例 研究 来 巩固 读者 对 DOM 操作 知 
识 点 的 掌握 。 


第 4 草 分 为 2 个 部 分 : 第 1 部 分 介绍 jQuery 中 的 事件 ， 第 2 部 分 介绍 jQuery 中 的 动画 。 在 第 
1 部 分 中 ， 详 细 介绍 了 jQuery 中 的 事件 方法 ， 例 如 事件 绑 定 、 合 成 事件 、 事 件 冒 泡 、 事 件 对 象 的 属 
性 、 移 除 事件 、 横 拟 事件 等 。 在 第 2 部 分 中 ， 详 细 介 绍 了 jQuery 中 的 动画 方法 ， 例 如 普通 动画 、 
渐 显 动画 、 自 定义 动画 等 。 在 讲解 动画 的 过 程 中 ， 还 介绍 了 制作 动画 过 程 中 一 些 和 常见 问题 。 最 后 通 
过 案例 研究 来 加 强 读者 对 事件 和 动画 的 理解 。 


第 5 章 是 实例 演练 。 首 先 针对 Web 中 常见 的 表单 操作 进行 了 讲解 ， 包 括 单行 文本 框 应 用 、 
多 行文 本 框 应 用 、 复 选 框 应 用 、 下 拉 框 应 用 和 表单 验证 ; 然后 针对 常见 的 表格 操作 进行 了 讲解 ， 
包括 表格 变色 、 表 格 展开 关闭 和 表格 内 容 筛选 ， 最 后 对 常见 的 网 页 操作 ， 包 括 网 页 字体 大 小 、 
网 页 选项 卡 和 网 页 换 肤 等 应 用 进行 了 讲解 。 相 信 读 者 在 本 章 可 以 找到 很 多 与 项 目 相关 的 示例 和 
说 明 。 

本 章 是 对 前 面 4 草 知 识 的 一 个 巩固 。 


第 6 章 的 重点 是 Ajax 应 用 。 首 先 介绍 了 Ajax 技术 的 优势 和 不 足 ， 以 及 Ajax 的 核心 对 象 

XMLHttpRequest; 然后 介绍 jQuery 中 的 Ajax 解决 方案 ， 例 如 load0、$.get0、$.post0、$.ajax0O 等 ; 
这 些 方法 和 DOM 操作 的 结合 将 大 大 简化 Ajax 的 开发 ; 接 下 来 介绍 了 Ajax 中 的 序列 化 元 素 和 全 局 
事件 ， 最 后 通过 将 Ajax 聊天 程序 作为 案例 进行 研究 以 巩固 读者 对 Ajax 操作 的 掌握 。 
第 7 章 的 重点 是 插件 。 jQuery 有 着 非常 丰富 而 强大 的 插件 。 在 这 一 章 里 ， 首 先是 对 几 个 常见 而 
用 的 插件 进行 详细 讲解 ， 例 如 表单 验证 插件 (Validation Plugin)、 表 单 插件 (Form Plugin)、 遮 时 
口 插件 (SimpleModal Plugin )、Cookie 插件 和 UI 插件 ;然后 详细 介绍 了 如 何 编写 jQuery 插件 和 
使 用 插件 应 注意 的 事项 。 


本 章 是 学 习 jQuery 的 插件 应 用 和 编写 的 基础 。 
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第 8 半 将 前 7 草 讲 解 的 知识 点 和 效果 进行 整合 ， 打 造 出 一 个 非常 有 个 性 的 网 站 ， 并 从 案例 研 





究 、 网 站 材料 、 网 站 结构 、 网 站 样式 和 网 站 脚本 等 多 方面 指导 读者 参与 项 目 建设 ， 而 不 仅仅 是 简单 


地 编写 代码 。 


第 9 章 讲解 jQuery Mobile 的 使 用 。jQuery Mobile 是 jQuery 在 移动 设备 应 用 上 的 一 个 新 项 目 。 

它 基 于 jQuery 框架 并 使 用 了 HTML 5 和 CSS 3 这 些 新 的 技术 ， 除 了 能 提供 很 多 基础 的 移动 页 面 元 
素 开发 功能 外 ， 框 架 自 身 还 提供 了 很 多 可 供 扩展 的 API， 以 便于 开发 人 员 在 移动 应 用 上 使 用 。 在 这 
章 里 ， 首 先 对 HTML 5 这 个 新 技术 进行 介绍 ， 然 后 对 jQuery Mobile 进行 介绍 ， 一 步 步 告 诉 大 家 




















如 何 使 用 jQuery Mobile。 








第 10 章 讲 解 jQuery 各 个 版 本 的 变化 。 在 这 里 我 应 该 感谢 很 多 读者 ， 正 是 因为 你 们 的 强烈 要 
求 ， 所 以 此 部 分 才 出 现在 本 书 第 2 版 中 。 本 前 对 每 个 版 本 jQuery 功能 的 变化 进行 了 详解 ， 让 大 家 
对 jQuery 每 个 版 本 的 变化 了 如 指 掌 ， 相 信 读 者 对 这 章 会 非常 期 竺 并 且 喜 欢 。 


第 11 章 讲 解 了 jQuery 的 性 能 优化 和 技巧 。 现 在 越 来 越 多 的 网 站 开始 使 用 jQuery 来 构建 以 往 
需要 靠 Flash 来 实现 的 超 酯 动态 效果 。jQuery 作为 一 个 JavaScript 类 库 ， 很 多 人 并 不 是 很 清楚 如 何 
正确 使 用 jQuery 来 达到 最 佳 的 性 能 。 
同时 本 半 也 列举 了 很 多 jQuery 技巧 ， 相 信 这 些 对 大 家 在 书写 高 性 能 的 Web 应 用 中 会 有 所 帮助 。 

本 书 的 附录 部 分 也 是 跟 jQuery 相关 的 一 些 重要 知识 点 ， 共 有 7 篇 。 


第 1 篇 介绍 了 jQuery 中 的 $(document).ready0 方 法 。 





第 2 篇 介绍 了 前 端 开发 调试 工 





第 7 篇 是 jQuery API 速 查 表 。 


读者 对 象 























本 章 要 告诉 大 家 在 书写 代码 时 ， 应 该 需要 注意 的 性 能 问题 。 

















Firebug 。 


第 3 篇 介绍 了 Ajax 的 核心 对 象 一 一 XMLHttpRequest。 
第 4 篇 介绍 了 jQuery 中 的 $.ajax0 方 法 。 

第 5 篇 介绍 了 jQuery 加 载 并 解析 XML。 

第 6 篇 是 第 7 章 的 插件 的 API。 





本 书 适合 所 有 对 jQuery 技术 感 兴趣 的 Web 设计 者 和 前 端 开发 人 员 阅 读 学 习 。 








阅读 此 书 需要 有 一 定 的 HIML、CSS 和 JavaScript 基础 知识 。 


本 书 约定 


1. 本 书 代码 以 灰色 为 背景 ， 如 下 所 示 : 


<html> 

<head> 

<!-- 在 head 标 签 内 口 D jQuery --> 

SesSre = /Seoul ye ex/Vasen /seo 
</head> 

<body> 

</body> 

</html> 


2. 几 本 书 中 有 需要 读者 注意 的 知识 点 或 其 他 内 容 时 ， 将 给 出 以 下 提示 : 











注意 : 在 本 书 的 所 有 章节 中 ， 如 果 没 有 特别 说 明 ，jQuery 库 都 是 默认 导入 的 。 





3. 本 书 所 有 例子 都 是 基于 jQuery1.7.1 版 而 制作 。 

4. 如 果 没 有 特别 说 明 ，jQuery1.7.1 程序 库 都 是 默认 导入 的 。 

5. 如 果 没 有 特别 说 明 ， 程 序 中 的 $ 符 号 都 是 jQuery 的 一 个 简写 形式 。 
6. 如 果 没 有 特别 说 明 ， 代 码 默 认 都 是 在 documentready0 里 执行 。 

7. 如 果 获 取 的 是 jQuery 对 象 ， 那 么 我 们 在 变量 前 面 加 上 $， 如 : 

















var $variable = jQuery 00: 
如 果 获 取 的 是 DOM 对 象 ， 则 这 么 定义 : 
var variable = DOMODO: 














本 书 中 的 例子 均 会 以 这 种 形式 呈现 ， 以 方便 读者 阅读 。 
8. 如 果 没 有 特别 说 明 ， 所 有 网 页 的 头 部 都 必须 有 标准 的 DOCTYPE 声明 。 








读者 反馈 & 示 例 下 载 


十 分 欢迎 来 自 读者 的 宝贵 的 建议 。 这 些 建议 可 以 是 您 感 兴 趣 的 内 容 , 或 者 是 没有 介绍 详细 而 又 
十 分 需要 的 知识 。 来 自 读 者 第 一 手 的 建议 ， 是 本 书 继续 改进 的 最 好 动力 。 


本 书 中 的 示例 代码 可 以 在 http://cssrain.sinaapp.com 下 载 。 





疑难 解答 & 本 书 勘误 





虽然 我 们 已 经 尽力 校 核 所 有 内 容 的 准确 性 ， 但 不 可 避免 地 还 会 出 现 一 些 错误 ， 包 括 文 字 和 代码 错 
误 。 诚 县 地 希望 细心 的 读者 能 向 我 们 提交 这 些 错 误 ， 我 们 将 十 分 感谢 并 及 时 发 布 最 新 的 勘误 结果 ， 这 
也 有 助 于 本 书后 续 版 本 的 改进 。 提 交 邮 箱 为 cssrain@gmail.com， 勘 误 内 容 将 在 http://cssrain.sinaapp.com 
上 上 发布。 


总 而 言 之 ， 第 2 版 新 增 的 内 容 都 十 分 精彩 ， 对 读者 绝对 有 用 。 为 了 尽量 多 展示 一 些 内 容 ， 我 们 
省 略 了 一 些 可 能 不 太 重 要 的 代码 ,如果 按 照 书 籍 内 容 写 出 的 代码 不 能 执行 ,请 到 我 们 提供 的 地 址 下 
载 源 文件 。 


最 后 ， 还 是 希望 本 书 能 给 大 家 带 来 收获 。 
每 多 学 一 点 知识 ， 就 能 少 写 一 点 代码 。 
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2012.4 
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从 早期 的 Prototype、Dojo 到 2006 名 
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随 着 Web 2.0 的 兴起 ，JavaScript 越 来 越 受到 重视 ， 一 系列 JavaScript 程序 库 也 鞍 勃 发 展 起 来 。 





























FE 的 jQuery， 再 到 2007 年 的 ExtJS， 互 联网 正在 掀起 一 场 JavaScript 














风暴 。jQuery 以 其 独特 优雅 的 姿态 ， 始 终 处 于 这 场 风暴 的 中 心 ， 受 到 越 来 越 多 的 人 的 追捧 。 


Gp) Ge 


1. 


页 和 


1.1 JavaScriptD 





在 正式 介绍 jQuery 之 前 ， 有 必要 先 了 解 一 下 JavaScript。 








JavaScript 是 Netscape 公司 开发 的 一 利 


























] 户 之 间 实 现 了 一 种 实时 的 、 动 态 的 和 交互 的 关系 ， 使 网 页 可 以 包含 更 多 活跃 的 元 素 和 更 加 精 








PF 脚本 语言 (scripting language )。JavaScript 的 出 现 使 得 网 











彩 的 内 容 。JavaScript 自身 存在 3 个 次 端 ， 即 复杂 的 文档 对 象 模型 (DOM)、 不 一 致 的 浏览 器 实现 


和 便捷 的 ] 


(Asynchronous JavaScript And XML, 
































开发、 调试 工具 的 缺乏 。 


正当 JavaScript 从 开发 者 的 视线 中 渐渐 隐 去 时 ， 一 种 新 型 的 基于 JavaScript 的 Web 技术 
异步 的 JavaScript 和 XML) 诞生 了 。 而 使 人 们 真正 认识 到 Ajax 











Ajax 


技术 的 强大 的 导 火 索 是 Google 公司 推出 的 一 系列 新 型 Web 应 用 ， 例 如 Gmail、Google Suggest 和 


Google Map 等 。 如 今 ， 


仅 用 于 制作 Web 页 面 的 简单 脚本 。 



































1.1.2 JavaScriptD0O000DO 


义 的 对 象 和 实用 函数 ， 能 帮助 使 用 
































浩瀚 的 互联 网 中 基于 JavaScript 的 应 用 越 来 越 多 ，JavaScript 不 再 是 一 种 仅 














为 了 简化 JavaScript 的 开发 ， 一 些 JavaScript 程序 库 诞 生 了 。JavaScript 程序 库 封 装 了 很 多 预定 






































兼容 各 大 浏览 占 。 下 面 是 






































者 轻松 地 建立 有 高 难度 交互 的 Web 2.0 特性 的 富 客户 端 页 面 ， 并 
前 儿 种 流行 的 JavaScript 程序 库 的 介绍 和 对 比 。 





























Prototype (http://www.prototypejs.org/)，Logo 如 图 1-1 所 示 。 


Prototype 是 最 早 成 型 的 JavaScript 库 之 一 ， 对 JavaScript 的 内 置 对 象 ( 例 如 String 对 象 、Array 


0 0 jQuery0 20 


对 象 等 ) 做 了 
有 
的 儿 段 代码 抽 

















/ 





大 量 的 现在 还 有 很 多 项 





扩展 。 














日 的 JavaScript 的 方法 组 合 在 一 起 而 形成 的 JavaScript 库 。 
































出 来 放 进 自己 的 脚本 里 。 但 是 









































使 
1 于 Prototype 成 型 4 






































编程 思想 把 握 








MP 


得 不 是 很 到 位 ， 导 致 了 其 结构 





Dojo (http://dojotoolkit.org/)，Logo 如 图 1-2 所 示 。 


Dojo 
的 API、 生 成 


合 企业 级 应 

















的 强大 之 处 在 于 Dojo 提供 
基于 SVG/VML 
的 JavaScript 库 ， 并 且 得 到 了 IBM、SUN 和 BEA 等 一 些 大 公司 的 支持 。 但 是 Dojo 


D1-1 Prototype DD Logo 











了 很 多 





dojo the javascript toolkit 
0 1-2 Dojo0D Logo 











其 他 JavaScript 库 所 没有 提供 的 功能 











图 





标的 组 件 、 














的 缺点 也 是 


潜力 的 库 。 





YUI (http://developer.yahoo.com/yui/)，Logo 如 图 1-3 所 


YUI (Yahoo! UI，The Yahoo! User Interface Library)， 是 


很 明显 


致 已 有 的 程序 失效 。 但 是 自 























的 : 学 习 曲 线 耳 ， 文 档 


从 Dojo 的 1.0.0 












































[S 


好 的 富 交 互 网 页 程序 工具 集 。YUI 封装 了 




















等 ， 同 时 








Ext JS (http://www.extjs.com/)，Logo 如 


Ext JS 常 
到 可 以 利用 包 














还 包括 了 几 个 核心 的 CSS 文件 。 


《了 Yahool ul 


0 1:3 YUID Logo 


简称 为 Ext， 原 本 是 对 YUI 的 一 
括 jQuery 在 内 的 多 种 JavaScript 框架 作为 





Ext 可 以 用 来 
面 ， 本 身 























十 发 富有 14 
比较 脐 肿 ， 所 以 使 


















































于 界 | 
如 果 用 于 商业 











MooTools 是 一 套 轻 量 
Prototype 一 样 ， 




















] 途 ， 需 要 付费 











EB 
TH 


MooTools (http://mootools.net/)，Logo 如 








生生 十 
明 、 辣 证 、 


但 却 提供 

















核心 代码 大 小 只 





不 齐 人 


# 丽 外 观 的 富 客户 端 应 用 ， 
之 前 请 先 权 
获得 授权 许可 。 


模块 化 和 面向 对 
了 更 为 强大 的 功能 、 
\ 有 8KB。 无 论 用 到 哪个 模块 都 可 即时 














的 矢量 图 形 











诈 和 Comet 支持 等 。Dojo 是 





全 


， 最 严重 的 就 是 API 不 稳定 ， 每 次 升 
现 以 后 ， 情 况 有 所 好 转 ，Dojo 还 








版 出 








不 。 




















| Yahoo 公司 
一 系列 比较 丰富 的 功能 ， 例 














氏 








1-4 所 示 。 





全 Ext Js 


D1-4 Ext JSO Logo 


于 创建 前 端 用 户 界 面 ， 如 


























个 扩 














主要 








情 
x, 





是 一 个 很 有 发 


使 用 Prototype。Prototype 可 以 看 做 是 把 很 多 好 的 、 
者 可 以 在 需要 的 时 候 随时 将 寺 
年 代 较 早 ， 从 整体 上 对 面向 对 象 的 
的 松散 。 不 过 现在 Prototype 也 在 慢 慢 改进 。 





其 中 





。 例 如 离线 存储 


是 一 款 非常 适 


级 都 可 能 


长 








开发 的 一 套 完 备 的 、 扩 
如 DOM 操作 和 Ajax 
该 库 本 身 文 档 极 其 完备 ， 代 码 编写 得 也 非常 规范 。 


今 已 经 发 展 











基础 库 ， 而 Ext 作为 界面 的 扩展 
能 使 B/S 应 用 更 加 具有 活力 。 但 
衡 利 浆 。 另 外 ， 需 要 注意 的 是 ，Ext 并 
























































图 1-5 所 示 。 





。 MooTools 的 节 
其 模块 化 思想 


象 的 JavaScript 框架 
更 好 的 扩展 性 和 兼容 性 。 
导入 ， 即 使 是 


村 


























完整 版 大 小 也 不 超过 160KB。 





展 库 来 使 用 。 
日 是 由 于 Ext 侧 习 
E 完 


en 





全 免费 ， 








香 法 几乎 跟 
非常 优秀 ， 


010 00 jQuery 


Ss 
SE 


[=] 





洁 直 观 ， 文 档 完 善 ， 是 一 个 非常 不 错 的 


























外 站 对 象 的 编程 思想 


MooTools 完全 彻底 的 贯彻 了 | 
JavaScript 库 。 
jQuery (http://jquery.com)，Logo 如 图 1-6 所 示 。 
jQuery DOD Log0 


D1-6 
有 强大 的 选择 器 、 出 色 的 DOM 操作 、 可 靠 的 
F 发 者 去 学 习 


优点 吸引 了 一 批 批 的 JavaScript 天 
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D1-5 MooTools0D Log0 


个 轻 量 级 的 库 ,， 
央 点 ， 同 时 也 有 各 上 自 的 支持 者 和 反对 者 ， 目 前 儿 个 








的 重点 jQuery 同样 是 
的 兼容 性 和 链 式 操作 等 功能 。 这 上 







































































本 
事件 处 理 、 完 善 
已 、 研 究 它 。 
总 之 ， 每 个 JavaScript 库 都 有 各 自 的 优点 和 人 
量 趋势 图 ， 如 图 1-7 所 示 。 很 明显 ， 自 从 jQuery 诞生 那天 起 ， 
HH， 成 为 Web 开发 人 员 


最 流行 的 JavaScript 库 的 Google 访问 
直 在 稳步 上 升 ，jQuery 已 经 逐渐 从 其 他 JavaScript 库 中 脱 锋 而 
































其 关注 度 就 
的 最 佳 选择 。 
比例 是 以 “prototype” 所 有 年 份 的 全 球 平均 访问 量 为 基础 的 。 了 解 详情 
1.00 extjs m0.03 yui mm 0.68 mootools =0.12 jquery mw 0 .二 二 
Google Trends 





prototype 


D0O Javascript OO GoogleOODOOD0D 


-7 
者 可 以 通过 链接 http://www.google.com/trends 来 查找 更 多 相关 搜索 量 指数 。 

















DD 洒 4 
F 和 jQuery Mobile 等 开发 人 员 以 及 推 


1.2.1 jQuery[0 DO 
jQuery 是 继 Prototype 之 后 又 一 个 优秀 的 JavaScript 库 ， 是 一 个 由 John Resig 创建 于 2006 年 1 








队 主 要 包括 核心 库 、UI、 插 伯 





才 








开源 项 目 。 现 在 的 jQuery 








月 的 3 


000 jQuery0 0 2 吕 吕 


广 和 网 站 设计 、 维 护 人 员 。 


jQuery 凭借 简洁 的 语法 和 路 平台 的 兼容 性 , 极 大 地 简化 了 JavaScript 开发 人 员 人 遍历 HTML 文 
档 、 操 作 DOM、 处 理事 件 、 执 行动 画 和 开发 Ajax 的 操作 。 其 独特 而 又 优雅 的 代码 风格 改变 了 
JavaScript 程序 员 的 设计 思路 和 编写 程序 的 方式 。 总 之 ， 无 论 是 网 页 设计 师 、 后 台 开 发 者 、 业 余 
爱好 者 还 是 项 目 管理 者 ， 也 无 论 是 JavaScript 初学 者 还 还 是 JavaScript 高 手 ， 都 有 足够 多 的 理由 去 学 
习 jQuery。 
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1.2.2 jQuery0 0O 





A 强调 | 理 念 是 
下 优势 。 





得 少 ， 做 得 多 (write less，do more)。jQuery 独特 的 选择 器 、 链 式 操 
完善 的 Ajax 都 是 其 他 JavaScript 库 望 尘 莫 及 的 。 概 括 起 来 ,jQuery 有 以 
































(1) 轻 量 级 。jQuery 非常 轻巧 ， 采 用 UglifyJS (https:Wgithub.com/mishoo/UsglifyJS) 压缩 后 ， 
大 小 保持 在 30KB 左右 。 











注意 : 为 了 使 jQuery 变 得 轻巧 ，jQuery 一 直 在 寻求 最 好 的 压缩 工具 ， 所 以 jQuery 的 压缩 工具 也 
一 直 在 变化 ， 从 最 早 采 用 Dean Edwards 编写 的 Packer ( http://dean.edwards.name/packer/ )， 
到 后 来 使 用 Google 推出 的 Closure Compiler 进行 压缩 ， 最 后 到 目前 使 用 UglifyJS 进行 
压缩 。 











(2) 强大 的 选择 器 。jQuery 允许 开发 者 使 用 从 CSS 1 到 CSS 3 几乎 所 有 的 选择 器 ， 以 及 jQuery 
独创 的 高 级 而 复杂 的 选择 器 。 男 外 还 可 以 加 入 插件 使 其 支持 XPath 选择 器 ,甚至 开发 者 可 以 编写 属 
于 自己 的 选择 器 。 由 于 jQuery 文 持 选择 器 这 一 特性 ， 因 此 有 一 定 CSS 经 验 的 开发 人 员 可 以 很 容易 
地 切入 到 jQuery 的 学 习 中 来 。 第 2 章 将 详细 讲解 jQuery 中 强大 的 选择 器 。 


(3) 出 色 的 DOM 操作 的 封装 。jQuery 封装 了 大 量 常用 的 DOM 操作 ， 使 开发 者 在 编写 DOM 
操作 相关 程序 的 时 候 能 够 得 心 应 手 。jQuery 轻松 地 完成 各 种 原本 非常 复杂 的 操作 ， 让 JavaScript 
新 手 也 能 写 出 出 色 的 程序 。 第 3 草 将 重点 介绍 jQuery 中 的 DOM 操作 。 


(4) 可 靠 的 事件 处 理 机 制 。jQuery 的 事件 处 理 机 制 吸 收 了 JavaScript 专家 Dean Edwards 编写 的 
事件 处 理 函 数 的 精华 ， 使 得 jQuery 在 处 理事 件 绑 定 的 时 候 相 当 可 靠 。 在 预 留 退路 和 
degradation)、 循 序 渐进 以 及 非 入 侵 式 〈Unobtrusive ) 编程 思想 方面 ，jQuery 也 做 得 非常 不 错 。 

章 将 重点 介绍 jQuery 中 的 事件 处 理 。 


(5) 完善 的 Ajax。jQuery 将 所 有 的 Ajax 操作 封装 到 一 个 函数 $.ajaxO0 里 ， 使 得 开发 者 处 理 Ajax 
的 时 候 能 够 专心 处 理 业 务 逻 辑 而 无 需 关 心 复杂 的 浏览 器 兼容 性 和 XMLHttpRequest 对 象 的 创建 和 使 
用 的 问题 。 第 6 章 将 重点 介绍 jQuery 中 的 Ajax 处 理 。 
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(6) 不 污染 顶级 变量 。jQuery 只 建立 一 个 名 为 jQuery 的 对 象 
象 之 下 。 其 别名 $ 也 可 以 随时 将 




















JavaScript 库 共 存 ， 在 项 目 中 放心 地 引用 而 不 需要 考虑 到 后 期 可 能 的 六 
(7) 出 色 的 浏览 器 兼容 性 。 作 为 一 个 流行 的 JavaScript 库 ， 浏 览 器 的 外 


之 一 。jQuery 能 够 








控制 权 ， 绝 对 不 会 污 


























染 其 
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~ 010 00 jQuery 


所 有 
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在 了 6.0+、FF 3.6+、Safari 5.0+、Opera 和 Chrome 等 浏览 器 下 





同时 修复 了 一 些 浏览 器 之 间 的 差异 ， 使 开发 者 不 必 在 玫 


(8) 链 式 操作 方式 。jQuery 上 
jQuery 对 象 上 的 一 组 动作 ， 可 以 直接 连 写 而 无 需 避 
优雅 。 在 第 1.3.3 小 车 








无 穷 。 


(9) 隐 式 从 代 。 当 用 jQuery 找到 











过 历 每 一 个 返回 








(10) 行为 层 与 
事件 。 这 种 将 行为 






































F 展 项 目前 建立 浏览 器 


Ph 最 有 特色 的 莫 过 于 它 的 链 式 操作 方式 一 一 即 对 发 生 














| 突 。 





























h ， 将 要 讨论 代码 风格 的 问题 ， 从 最 


HE 


市 




















加 























结构 





层 与 结 
人 员 各 司 其 职 ， 择 脱 过 去 
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本 











可 以 使 
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LeAN9 





} 离 的 


减少 了 代码 量 。 


器 选中 元 素 ， 然 后 直接 给 元 素 添加 
开发 人 员 和 HTML 或 其 他 页 面 开发 


] jQuery 选择 
可 以 使 jQuery 














F 发 冲突 或 个 人 单干 的 开发 模式 。 同 时 













































































容 性 是 必须 具备 的 条 件 
FE 常 运行 。jQuery 
容 库 。 


的 函数 方法 都 在 这 个 对 
他 的 对 象 。 该 特性 使 jQuery 可 以 与 其 人 








CD 





同一 个 














E 复 获取 对 象 。 这 一 特点 使 jQuery 的 代码 无 比 
F 始 就 培 状 良好 的 编程 习惯 ， 将 受益 


有 “.myClass” 类 的 全 部 元 素 ， 然 后 隐藏 它们 时 ， 无 需 循 环 
的 元 素 。 相 反 ，jQuery 里 的 方法 都 被 设计 成 自动 操作 对 
这 使 得 大 量 的 循环 结构 变 得 不 再 必要 ， 从 而 大 刷 


的 分 离 。 开 发 者 


构 层 完全 


象 集 合 ， 而 不 是 单独 的 对 象 ， 



































， 后 期 维护 也 非常 方便 ， 不 需要 在 














HTML 代码 中 寻找 某 些 函数 和 重复 修改 HTML 代码 。 

(11) 丰富 的 插件 支持 。jQuery 的 易 扩 展 性 ， 吸 引 了 来 自 全 球 的 开发 者 来 编写 jQuery 的 扩展 插 
件 。 目 前 已 经 有 成 百 上 干 的 官方 插件 支持 ,而 且 还 不 断 有 新 插件 面世 。 第 7 章 将 介绍 目前 流行 的 几 
于 插件 并 指导 大 家 编写 自己 的 插件 。 

(12) 完善 的 文档 。jQuery 的 文档 非常 丰富 ， 不 管 是 英文 文档 ， 还 是 中 文 文档 。 我 们 也 在 长 期 
更 新 着 jQuery 的 中 文 文档 。 

(13) 开源 。jQuery 是 一 个 开源 的 产品 ， 任 何人 都 可 以 自由 地 使 用 并 提出 改进 意见 。 








下 面 就 一 起 开始 我 们 的 jQuery 之 旅 吧 。 


Eq0000o 





131 D0 jQuery0 0 


1000 jQueryD0000 


进入 jQuery 的 官方 网 站 http://jquery.com/。 图 
区 域 ， 下 载 最 新 的 jQuery 库 文件 。 




















1-8 所 示 的 右边 的 GRAB THE LATEST VERSION 








jQuery 2 


















































JQUerY 


jQuery is a fast and concise JavaScript Library that simplifies HTML 


Download 


Tutorials & Bug Tracker 


GRAB THE LATEST VERSION! 


CHOOSE YOUR COMPRESSION LEVEL: 


document traversing, event handling, animating, and Ajax interactions for 


rapid web development. jQuery is designed to change the way that you 
write JavaScript. 


W 
































20 jQuery 














jQuery 库 的 类 型 分 为 








区 别 如 表 1-1 所 示 。 





D1-8 


DEVELOPMENT (229KB, Uncompressed Code) 


4 





jQueryUDO0O00D 


鸡 种 ， 分 别 是 生产 版 “最 小 化 和 压缩 版 )》 和 开发 版 〈 未 压缩 版 )， 它 








局 
表 1-1 几 种 jQuery 库 类 型 对 比 
名 称 大 小 
jquery.js 《开发 版 ) 约 229 KB 完整 无 压缩 版 本 ， 主 要 用 于 测试 、 学 习 和 开发 
经 过 工具 压缩 或 经 过 服务 器 开启 Gzip 压缩 
jdquerymin.js《〈 生 产 版 ) 约 31 KB a DT op 














为 统一 本 书 的 讲解 ， 
30 jQuery 



































jQuery 不 需要 安装 ， 





el 
























































是 相对 路 径 。 在 实际 项 目 





在 编写 的 页 面 代码 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 





transitional.dtd"> 
<html> 
<head> 














4 jQuery 


本 书 将 jquery.js 放 在 目录 scripts 下 ， 在 所 提供 的 jQuery 例子 中 为 了 方便 调试 ，3 
PF， 读 者 可 以 根据 实际 需要 调整 jQuery 库 的 路 径 。 


P<head> 标 签 内 引入 jQuery 库 后 ， 就 可 以 使 用 jQuery 库 了 ， 程 序 如 下 : 








把 下 载 的 jquery.js 放 到 网 站 
日 jQuery 时 ， 只 需要 在 相关 的 HTML 文档 中 引入 该 库 文件 的 位 置 即 可 。 











PRODUCTION (31KB8, Minified and Gzipped) 





主要 应 用 于 产品 和 项 E 


建议 选择 下 载 jQuery 最 新 版 本 。 






































上 的 一 个 公共 的 位 时 

















<meta http-equiv="Content-Type” content="text/html; charset=utf-8" /> 
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<!-- 在 head 标 签 内 引入 jQuery --> 

<script src="../scripts/jquery.js" type="text/javascript"></script> 
</head> 

<body> 

</body> 

</html> 





注意 : 在 本 书 的 所 有 章节 中 ， 如 果 没 有 特别 说 明 ，jQuery 库 都 是 默认 导入 的 。 





1.3.2 D0000 jQuery0 0 














在 开始 编写 第 1 个 jQuery 程序 之 前 ， 首 先 应 该 明确 一 点 ， 在 jQuery 库 中 ，$ 就 是 jQuery 的 一 
个 简写 形式 ， 例 如 $ ("#fo0") 和 jQuery("#foo") 是 等 价 的 ，$.ajax 和 jQuery.ajax 是 等 价 的 。 如 果 
没有 特别 说 明 ， 程 序 中 的 $ 符 号 都 是 jQuery 的 一 个 简写 形式 。 


下 面 开始 编写 第 1 个 jQuery 程序 。 



































We 

<!-- 00 jQuery --> 

<script src="../scripts/jquery.js"type="text/javascript"> </script> 
<script type="text/javascript"> 


$(document).ready(function(){ // 等 待 Dom 元 素 加 载 完 毕 
alert("Hello World!"); WW 弹出 二 个 框 
Dy 
</script> 
加 


运行 结果 如 图 1-9 所 示 。 








[JaYaScript 应 用 程序 ] x|l 
从 Hello World! 





D1-9 O00 Hello Wrld! 








在 上 面 的 代码 中 有 一 个 陌生 的 代码 片段 ， 如 下 : 

















$(document) .ready(function(){ 
人 


yo 
这 段 代 人 码 的 作用 类 似 于 传统 JavaScript 中 的 window.onload 方法 ， 不 过 与 window.onload 还 是 有 



























































些 区 别 。 表 格 1-2 对 它们 进行 了 简单 对 比 。 
表 1-2 window.onload 与 $(document).ready() 的 对 比 
window.onload $(document).ready() 
执行 时 机 必须 等 待 网 页 中 所 有 的 内 容 加 载 完 毕 后 〈 包 括 网 页 中 所 有 DOM 结构 绘制 完毕 后 就 执行 , 可 能 DOM 
图 片 ) 才能 执行 元 素 关 联 的 东西 并 没有 加 载 完 
不 能 同时 编写 多 个 能 同时 编写 多 个 
以 下 代码 无 法 正确 执行 : 以 下 代码 正确 执行 : 
window.onload = function(){ $(document).ready(function(){ 
alert("test1") alert("Hello World!"); 
编写 个 数 }: DD: 
window.onload = function(){ $(document).ready(function(){ 
alert("test2") alert("Hello again!"); 
站 }): 
结果 只 会 输出 “test2” 结果 两 次 都 输出 
$(document).ready(function(){ 
//... 
}): 
简化 写法 无 U0000: 
$(function(){ 
//... 
}); 











注意 : 关于 $(document).ready() 的 详细 说 明 可 以 参考 附录 A; 关于 $(document)ready0 和 window.onload 
的 详细 对 比 ， 可 以 参考 第 4 章 4.1.1 小 节 。 





1.3.3 jQuery00OO0D 




















代码 风格 即 程 序 开 发 人 员 所 编写 源 代码 的 书写 风格 。 展 好 代码 风格 的 特点 是 使 代码 易 读 。 如 果 
能 统一 jQuery 代码 编码 风格 ， 对 日 后 代码 的 维护 是 非常 有 利 的 。 



































I100000I 
































的 代码 为 例 ， 这 是 一 个 导航 栏 ，HTML 代码 如 下 : 








以 一 个 实际 项 














WE 
<diviclass— DOX > 
<ul class="menu"> 
<li class="levell"> 
<a href="#none">0 0 </a> 


<ul class="level2"> 
<1i><a href="#none 
<1i><a href="#none 
<1i><a href="#none 
<1i><a href="#none 
</Uul> 
</1i> 
<li class="levell"> 


">0 0 00 </a></1i> 
"0 000 </a></1i> 
"> 0 TO </a></1i> 
天 让 


<a href="#none">0 0 </a> 


<ul class="level2"> 
<1i><a href="#none 
<1i><a href="#none 
<1i><a href="#none 


<1i><a href="#none 


</ul> 
=/ 
<1i class="levell"> 


">0 0 0 0 </a></1i> 
"0 0 0 0 </a></1i> 
">0 0 0 0 </a></1i> 
>0 0 0 0 </a></1i> 














<a href="#none">0 0 </a> 


<ul class="level2"> 
<1i><a href="#none 
<1i><a href="#none 
<1i><a href="#none 


'>0 0 </a></1i> 
0 00 < 
>0 0 0 </a></1i> 
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<1i><a href="#none">0 0 0 0 0 </a></1i> 














































































































</ul> 
妃 川 诊 
</ul> 
</div> 
WO 
尺码 执行 效果 如 图 1-10 所 示 。 
衬衫 
项 目 需求 是 做 一 个 导航 栏 ， 单 击 不 同 的 商品 名 称 链接 ， 显 示 相 应 的 内 卫衣 
容 ， 同 时 高 亮 显示 当前 选择 的 商品 。 裤子 
je ee oy i 01-10 000000 
选择 jQuery 来 实现 这 个 导航 栏 效 果 ， 编 写 的 代码 片段 如 下 : 
(".levell > a").click(function(){ 
$(this).addClass("current").next().show().parent().siblings(). children("a").removeClass 
("current").next().hide(): 
return false; 
es 
这 段 代码 的 作用 是 ， 当 鼠标 单 击 到 a 元 素 〈 它 是 class 含有 levell 的 子 元 素 ) 的 时 候 ， 给 其 添 
加 一 个 名 为 current 的 class， 然 后 将 紧邻 其 后 面 的 元 素 显 示 出 来 ， 同 时 将 它 的 父 碍 的 同 奏 元 素 内 部 








0U00Ujouery00O 200 























的 子 元 素 <a> 都 去 掉 一 个 名 为 current 的 class， 并 且 将 紧邻 它们 后 面 的 元 素 都 隐藏 。 
单 击 导 航 栏 ， 效 果 如 图 1-11 和 图 1-12 所 示 。 














长 袖 衬衫 开 襟 卫衣 
短 袖 I 节 套头 卫衣 

长 袖 I 荔 运动 卫衣 

卫衣 | 童装 卫衣 

裤子 裤子 

D0111 001 01-12 00 2 


这 就 是 jQuery 强大 的 链 式 操 作 ， 一 行 代码 就 完成 了 导航 栏 的 功能 。 


虽然 jQuery 做 到 了 行为 和 内 容 的 分 离 ， 但 jQuery 代码 本 身 也 应 该 拥有 良好 的 层次 结构 及 规 
范 ， 这 样 才能 进一步 改善 代码 的 可 读 性 和 可 维护 性 。 因 此 ， 推 荐 一 种 带 有 适当 的 格式 的 代码 风格 。 
上 面 的 代码 改 成 如 下 格式 : 


$(".levell > a").click(function(){ 
$(this).addClass("current") Vd ure ud 
.next().show() eA 
.parent().siblings().children("a").removeClass("current") 
VA el eum 
.next().hide(); VA 
return false; 


be 

代码 格式 调整 后 ， 易 读 性 好 了 很 多 。 

也 许 读者 看 了 上 面 的 代码 还 是 不 明白 其 中 的 要 领 ， 这 里 总 结 3 种 情况 。 
(1) 对 于 同一 个 对 象 不 超过 3 个 操作 的 ， 可 以 直接 写成 一 行 。 代 码 如 下 : 
















































































SO Ts mow eile no we i ete 


(2) 对 于 同一 个 对 象 的 较 多 操作 ， 建 议 每 行 写 一 个 操作 。 代 码 如 下 : 








$(this).removeClass("mouseout") 
.addClass("mouseover") 
.Stop() 
.fadelo("fast",0.6) 
.fadeTo("fast",1) 
.unbind("click") 
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elnekn uesnome 
// do something .. 
Wa 
(3) 对 于 多 个 对 象 的 少量 操作 ， 可 以 每 个 对 象 号 一 行 ， 如 果 涉 及 子 元 素 ， 可 以 考虑 适当 地 缩 
进 。 例 如 上 面 提 到 的 代码 : 
$(this).addClass("highlight") 
.children("1i").show().end() 


.Siblings().removeClass("highlight") 
gehen me de 
































注意 : 程序 块 严 格 采用 缩 进 风格 书写 ， 能 保证 代码 清晰 易 读 ， 风 格 一 至 





200000000 


jQuery 以 其 强大 的 选择 器 著称 ， 有 时 候 很 复杂 的 问题 用 一 行 选择 器 就 可 以 轻松 解决 。 但 是 使 用 
jQuery 进行 代码 编写 时 应 该 注意 一 个 问题 ， 就 是 必要 的 注释 。 请 看 下 面 的 例子 ， 代 码 如 下 : 























$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background", "red"): 
这 行 代码 即使 是 经 验 丰 富 的 jQuery 开发 者 也 不 能 立刻 看 懂 。 


这 行 代码 的 作用 是 ， 在 一 个 id 为 table 的 表格 的 tbody 元 素 中 ， 如 果 每 行 的 一 列 中 的 checkbox 
没有 被 禁用 ， 则 把 这 一 行 的 背景 色 设 为 红色 。 


jQuery 的 选择 器 很 强大 ， 能 够 省 去 使 用 普通 的 JavaScript 必须 编写 的 很 多 行 代码 。 但 是 ， 在 允 
写 一 个 优秀 的 选择 器 的 时 候 ， 和 于 万 不 要 态 记 给 这 一 段 代 码 加 上 注释 ， 这 很 重要 。 无 论 是 自 1 
读 还 是 与 他 人 分 享 、 合作 开发 ,注释 都 能 起 到 良好 的 效果 。 在 上 上 段 代 码 片 段 中 加 上 注释 就 能 提高 其 
易 读 性 ， 如 下 所 示 : 


| oe ese | 
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background", "red"): 


通过 类 似 有 意义 的 注释 ， 能 够 培养 良好 的 编码 习惯 和 风格 ， 提 高 开发 效率 。 


世 ea 000 Jo [中 


1.4.1 DOMDOODOD jQuery0 O00 




































































































































































第 一 次 学 习 jQuery， 经 常 分 辨 不 清 哪些 是 jQuery 对 象 、 哪 些 是 DOM 对 象 ， 因 此 需要 重点 了 
解 jQuery 对 象 和 DOM 对 象 以 及 它们 之 间 的 关系 。 
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000iouey00200 
10 DOMDDO 


DOM (Document Object Model， 文 档 对 象 模型 )， 每 一 份 DOM 都 可 以 表示 成 一 棵 树 。 下 面 来 
构建 一 个 非常 基本 的 网 页 ， 网 页 代码 如 下 : 








加 四 画面 加 加 
< 0 Wn 
< ielea 人 nu. O00 
<U]> 
<| 1 SA 
1 0 WIN 
< /il 信 
SAU 


NW 
初始 化 效果 图 如 图 1-13 所 示 。 
可 以 把 上 面 的 HTML 结构 描述 为 一 棵 DOM 树 ， 如 图 1-14 所 示 。 








例子 
你 最 喜欢 的 水 果 是 ? 





01-13 000000000 01-14 00000000 poMD 

















在 这 棵 DOM 树 中 ，<h3>、<p>、<ul> 以 及 <ul> 的 3 个 <li> 子 节点 都 是 DOM 元 素 节 点 。 可 以 通 
过 JavaScript 中 的 getElementsByTagName 或 者 getElementById 来 获取 元 素 节 点 。 像 这 样 得 到 的 DOM 
元 素 就 是 DOM 对 象 。DOM 对 象 可 以 使 用 JavaScript 中 的 方法 ， 示 例如 下 : 


var dom0bj = document .getElementById("id"); //D 0 DoMDD 
var ObjHIML = dom0bj .innerHTML ; //D 0 Javascript 0 0 00 一 一 innerHTML 
20 jQuery 0 0 


jQuery 对 象 就 是 通过 jQuery 包装 DOM 对 象 后 产生 的 对 象 。 
jQuery 对 象 是 jQuery 独 有 的 。 如 果 一 个 对 象 是 jQuery 对 象 ， 那 么 就 可 以 使 用 jQuery 里 的 方 























法 。 例如 : 
SOT 


这 段 代码 等 同 于 : 





D0 10 O00 jQuery 


fooD0000 htm000 .ntmOd0 jQuery0000 


document .getElementById("foo").innerHTML:; 















































在 jQuery 对 象 中 无 法 使 用 DOM 对 和 象 的 任何 方法 。 例 如 $("#id").innerHTML 和 $("#id").checked 
之 类 的 写法 都 是 错误 的 ， 可 以 用 





$("#id").htmlO 和 $("##id").attr("checked") 之 类 的 jQuery 方法 来 代替 。 


同样 ，DOM 对 象 也 不 能 使 用 jQuery 里 的 方法 。 例 如 document.get Element ById("id").html0 也 会 报 
错 ， 只 能 用 document.getElementById("id").innerHTML 语句 。 




















注意 : 用 术 d 作为 选择 符 取得 的 是 jQuery 对 象 而 并 非 document.getElementBylId("id") 所 得 到 的 DOM 
对 象 ， 两 者 并 不 等 价 。 关 于 “#” 选 择 符 的 运用 ， 将 在 下 一 章 进行 讲解 。 从 学 习 jQuery 开始 


就 应 当 树 立正 确 的 观念 ， 
轻松 很 多 。 


分 清 jQuery 对 象 和 DOM 对 象 之 间 的 区 别 ， 之 后 学 习 jQuery 就 会 





142 jQureyD D0 PoMDOODOOOOO 














在 讨论 jQurey 对 象 和 DOM 对 象 的 相互 转换 之 前 ， 先 约定 好 定义 变量 的 风格 。 如 果 获 取 的 对 

















象 是 jQuery 对 象 ， 那 么 在 变量 前 面 加 上 $， 例 如 : 














var $variable = jQuery 


OE 


如 果 获 取 的 是 DOM 对 象 ， 则 定义 如 下 : 


var variable = OM 


本 书 中 的 例子 均 会 以 这 种 方 





























10 jQuery | DOMDD 

















式 呈 现 ， 以 方便 读者 阅读 。 

















jQuery 对 象 不 能 使 用 DOM 中 的 方法 ， 但 如 果 对 jQuery 对 象 所 提供 的 方法 不 熟悉 ， 或 者 jQuery 




















没有 封 厂 想 要 的 方法 ， 不 得 不 使 





























j DOM 对 象 的 时 候 ， 有 以 下 两 种 处 理 方 法 。 














jQuery 提供 了 两 种 方法 将 一 个 jQuery 对 和 象 转换 成 DOM 对 象 ， 即 [index] 和 get (index )。 
(1) jQuery 对 象 是 一 个 类 似 数组 的 对 象 ， 可 以 通过 [index] 的 方法 得 到 相应 的 DOM 对象。 


jQuery 代码 如 下 : 
VOICE 
ar = $cr[0]: 





//jQueryDDD 
//DOMDD 
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alert( cr.checked ) ene 

















(2) 另 一 种 方法 是 jQuery 本 身 提 供 的 ， 通 过 get(index) 方 法 得 到 相应 的 DOM 对象。 
jQuery 代码 如 下 : 








VersecT 三 $("#cr"); //jQueryDDD 
Vanacene = $cr.get(0); //DOMDDD 
alert(cr.checked) yA ee aoa 


20D DOMD DOD jQuery0 0 























对 于 一 个 DOM 对 象 ， 只 需要 用 $0 把 DOM 对 象 包装 起 来 ， 就 可 以 获得 一 个 jQuery 对 象 了 。 
方式 为 $ (DOM 对 象 )。 


jQuery 代码 如 下 : 
var cr = document.getElementById("cr"): //DOMDD 
var eer er //jQueryDDD 








转换 后 ， 可 以 任意 使 用 jQuery 中 的 方法 。 





通过 以 上 方法 ， 可 以 任意 地 相互 转换 jQuery 对 象 和 DOM 对 象 。 






































最 后 再 次 强调 ，DOM 对 象 才能 使 用 DOM 中 的 方法 ，jQuery 对 象 不 可 以 使 用 DOM 中 的 方法 ， 
但 jQuery 对 象 提供 了 一 套 更 加 完善 的 工具 用 于 操作 DOM， 关 于 jQuery 的 DOM 操作 将 在 第 3 章 进 
行 详细 讲解 。 




































































注意 : 平时 用 到 的 jQuery 对 象 都 是 通过 $0 函 数 制造 出 来 的 ，$0 函 数 就 是 一 个 jQuery 对 象 的 制造 工厂 。 
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下 面 举 个 简单 的 例子 ， 来 加 深 对 jQuery 对 象 和 DOM 对 象 的 理解 。 


























有 些 论坛 在 用 户 注 册 的 时 候 ， 必 须 先 要 同意 论坛 的 规章 制度 ， 才 可 以 进行 下 一 步 操作 。 如 
图 1-15 是 茶 个 论坛 的 注册 页 面 ， 用 户 必须 选中 页 面 下 方 的 “同意 并 接受 注册 协议 ” 复 选 框 ， 否 
则 不 能 提交 。 















































编写 一 段 简单 的 代码 来 实现 这 个 功能 。 新 建 一 个 空白 的 页 面 ， 然 后 添加 以 下 HTML 代码 : 








nou ea ene om /al eo sae 
HTML 代码 初始 效果 如 图 1-16 所 示 。 




















2 0 10 00 jQuery 


通过 $("#cr") 获 取 到 复 选 





用 户 注册 [基本 信息 ) 





用 户 名 | 


验证 的 点 击 名 取 输 证 码 
性 别 © 9 靶 。C 全 六 








请 再 输 一 这 确认 | 





E-Mail | 


请 回答 注册 问题 2125? 





你 的 回答 是 : 





为 避免 机 器 注册 请 提交 “请 设置 您 所 在 时 区 
您 所 区 和 8 上 间 ] 您 所 在 地 和 Nj 间 是 几 点 ~ 


高 级 选项 “ 厂 轩 示 高 级 用 户 设置 选项 





友 同意 并 接 要 注册 协议 时 得 








执行 下 一 步 操作 。 





| 














年 先 ， 











(document ) .ready(function(){ 
var $cr = $("#cr"); 
var er= sent 
sennelex( ue 天 

if(cr.checked){ 


0115 00000000 








然后 编写 JavaScript 部 分 。 前 面 讲 过 ， 没 有 特殊 声明 ，jQuery 库 是 默认 导入 的 。 
EE 元 素 ， 然 后 通过 判断 复 选 框 是 否 被 选中 ， 来 。 固 我 已 经 阅读 了 上 面 制度 。 











01-16 0000 


昌 DOM 方式 来 判断 复 选 框 是 否 被 选中 ， 代 码 如 下 : 


GA ete ooo oa 
//jQueryDD 
//DOMD DOUD $cr.get(0) 


//DOM 方式 判断 


ea 人 加 加 可可 


} 


}) 





实现 上 述 代码 后 ， 选 中 “我 已 经 阅读 了 








团 我 已 经 


人 感谢 你 的 立 持 ! 你 可 以 旬 续 得 作 ! 








症 度 ” 复 选 框 ， 如 图 1-17 所 示 。 





' 
TI 
| 
下 

















阅读 了 上 面 制度 . 





0117 000000000 

















换 一 种 方式 ， 使 用 jQuery 中 的 方法 来 判断 选项 是 否 被 选中 ， 代 码 如 下 : 
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$(document ) .ready(function(){ Voc on 
var $cr = $("#cr"); //jQueryDDD 
中 eeLEEGIUNGEIOT ON 
if($cr.is(":checked")){ //jQuery 方 式 判 断 


GUIDE 


}) 
上 面 的 例子 简单 地 演示 了 DOM 对象 和 jQuery 对 象 的 不 同 ， 但 最 终 效 果 是 一 样 的 。 

















注意 : is(":checked") 是 jQuery 中 的 方法 ， 判 断 jQuery 对 象 是 否 被 选中 ， 返 回 boolean 值 。 





Eo *won0000000 


在 jQuery 库 中 ， 几 乎 所 有 的 插件 都 被 限制 在 它 的 命名 空间 里 。 通 常 ， 全 局 对 象 都 被 很 好 地 存 
储 在 jQuery 命名 空间 里 ,因此 当 把 jQuery 和 其 他 JavaScript 库 〈 例 如 Prototype、MooTools 或 YUD) 
一 起 使 用 时 ， 不 会 引起 冲突 。 































































































注意 : 默认 情况 下 ，jQuery 用 $ 作 为 自身 的 快捷 方式 。 








10 jQuery | 加 加 轩 辆 四 辆 而 因 玫 


在 其 他 库 和 jQuery 库 都 被 加 载 完 毕 后 ， 可 以 在 任何 时 候 调 用 jQuerynoConflictO 函 数 来 将 变量 $ 
的 控制 权 移交 给 其 他 JavaScript 库 。 示 例如 下 : 









































员 











We 
<p id="pp">Test-prototype( 上 中 [OOO )</p> 
<p >Test-jQuery(Q D000000 )</p> 
= be 
<script sre="1ib/prototype.js” type="text/javaseript"></seript> 
到 加 四 关注 <== 
<script src="../../scripts/jquery.js" type="text/javascript"></script> 
<script language="javascript"> 
jQuery.noConflict()://0 O00 $0000000 prototype.js 
jQuery(function(){//D 0 jQuery 
jQuery("p").click(function(){ 
alert( jQuery(this).text() 六 





by 
}y 
$("pp").style.display = 'none'; /0OD prototype.js0000 
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D0 10 O00 jQuery 


SS 
</body> 
WW 加 


然后 ， 就 可 以 在 程序 里 将 jQuery 0 函数 作为 jQuery 对 象 的 制造 工厂 。 


此 外 ， 还 有 男 一 种 选择 。 如 果 想 确保 jQuery 不 会 与 其 他 库 冲 突 ， 但 又 想 自 定义 一 个 快捷 方式 
可 以 进行 如 下 操作 : 















































彤 二 加 画 区 天 占 回 
var $j = jQuery.noConflict()， A 
$j(function( ){ 加 





Ba ee knee om 
alert( $j(this).text() ):; 
2 
}) 
$("pp").style.display = "none'; // 旧 中 prototype.js 品 旧 00 
We 加 加 加 加 上 


可 以 自 定义 备用 名 称 ， 例 如 jq、$J、awesomequery 等 。 


如 果 不 想 给 jQuery 目 定 义 这 些 备用 名 称 , 还 想 使 用 $ 而 不 管 其 他 库 的 $0 方法 ,同时 又 不 想 与 
他 库 相 冲突 ， 那 么 可 以 使 用 以 下 两 种 解决 方法 。 













































































和 
= 加 加 轩 加 轩 加 
jQuery .noConflict(); WAN or oes 
jQuery(function($){ 加 加 回避 本 
Tm Ne lie ke ya a a aa a sa 
alert($(this).text() ): 
}) 
}) 
$("pp").style.display = 'none'; //D DO prototype 
WW 加 加 
其 三 : 
WW 加 加 
jQuery .noConflict() : WE 
(function($){ 光 轩 加 加 加 加 加 加 加 加 加 加 OS 
$(function(){ A Uy, 
yr mele knee al ol sy | 
alert($(this).text() ): 
| 
ye 


了 


4 
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}) (jQuery); eo I 
$("pp").style.display = "none’'; //D 0 prototype 

wo | 

这 应 该 是 最 理想 的 方式 ， 因 为 可 以 通过 改变 最 少 的 代码 来 实现 全 面 的 兼容 性 


























20jQueryUDODOOODOOODODOOD 
如 果 jQuery 库 在 其 他 库 之 前 就 导入 了 ， 那 么 可 以 直接 使 用 “jQuery” 来 做 一 些 jQuery 的 工作 。 

























































































同时 ， 可 以 使 用 $0 方法 作为 其 他 库 的 快捷 方式 。 这 里 无 需 调用 jQuery.noConflict0) 函 数 。 示 例如 下 : 

















WE 

<p id="pp">Test-prototype(D0 0 0 0 )</p> 

<p >Test-jQuery(Q D000000 )</p> 

本 加 可 Ney -> 

<script src="../../scripts/jquery.js" type="text/javascript"></script> 
<0=|0 oo 

<script src="|1ib/prototype.js" type="text/javascript"></script> 








<script language="javascript"> 
jQuery(Cfunction(){ /OODODOD jQuery0 0 000 "jQuery.noCconflict()"0 0 
jQuery("p").click(function(){ 
alert( jQuery(this).text() ); 
| 
2 
$("pp").style.display = 'none'; //D 0 prototype 
</script> 
7 


有 了 这 些 方 法 来 解决 冲突 ， 就 可 以 在 项 目 中 放心 地 引用 jQuery 了 。 
































Exa0000000 


10 Dreamweaver 























Dreamweaver 是 建立 Web 站 点 和 应 用 程序 的 专业 工具 。Dreamweaver 将 可 视 布局 工具 、 应 用 程 




















厅 天 





























发 功能 和 代码 编辑 支持 组 合 在 一 起 ， 使 得 各 个 层次 的 开发 人 员 和 设计 人 员 都 能 够 快速 创建 基于 
供 








标 闹 





的 网 站 和 应 用 程序 。 从 对 基于 CSS 的 设计 的 领先 文 持 到 手工 编码 功能 ，Dreamweaver 提供 了 




















专业 人 员 在 一 个 集成 、 高 效 的 开发 环境 中 所 需 的 工具 。 














目前 新 版 的 Adobe Dreamweaver CS 5.5 已 经 加 入 了 jQuery 语法 自动 提示 功能 。 如 果 你 还 在 使 


用 老 的 版 本 ， 又 想 有 jQuery 语法 提示 功能 的 话 ， 可 以 下 载 一 个 插件 。 在 http://code.google.com/p/ 
jquery-api-zh-cn/downloads/list 网 址 中 下 载 一 个 名 为 jQuery_api_for_dw4.rar 或 jQuery_api_for_dw3.rar 的 





插件 。 








D0 10 D0 jQuery 










在 Dreamweaver 中 依次 选择 “命令 ”一 “扩展 管理 ”一 “安装 扩展 ”一 “jQuery_api_for_dw4.mxp” 
命令 后 ， 就 会 自动 安装 插件 了 。 


如 果 效 果 如 图 1-18 所 示 ， 即 表明 安装 成 功 。 





This extension provides code hints, code olor ing, and code snippets for the | 
jQuery API - a popular JavaScript library. jQuery is freely available at 
http: /fjquery. com 


is extension references the 1.2.1 API for jQuery, featurine; 
* jQuery Core 

* Selectors 
* Attributes 








01-18 0D00 Dreamweaver [OO 





扩展 成 功 后 ， 重 新 启动 Dreamweaver， 新 建 空白 页 面 ， 引 入 jQuery， 然 后 编写 jQuery 代码 ， 
会 发 现 已 经 具有 自动 提示 功能 了 ， 如 图 1-19 所 示 。 











<!DOCTYPE html PUBLIC "-//W3C//DTD XHTHL 1.0 Transitional//EN" 
"http: /wm w3.oryg/TR/xhtnll/DTID/xhtnll-transitional. dtd"> 
<html xmlns="http: //Wwy.w3.0rg/1999/xhtml"> 

<head> 


<title>l1-3</title> 
<meta http-equiv="Content-Type”" content="text/htnml; charset=utf-8" /> 
<!-- 引入 jQuery --> 


<script src=",../scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<SCRIPT LANGUAGE="Javascript"> 
// 等 待 aom 元 素 加 载 完毕 . 
$(document) .ready(function(){ 
alert("Hello World!"); 
$1"p") .clid 
DD: | 


/itest2 
$ (document) .red 
alert("Hel] 


A 
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注意 : (1 ) 如 果 用 户 的 Dreamweaver 没有 扩展 管理 功能 ， 可 以 去 http://www.adobe.com/cn/exchange/ 
下 载 相 应 软件 即 可 。 
(2 ) 建议 读者 安装 最 新 版 本 的 Dreamweaver。 





20 Aptana 














Aptana 是 一 个 功能 非常 强大 、 开 源 和 专注 于 JavaScript 的 Ajax 开发 IDE。 


Aptana 的 特性 如 下 。 


提 


©0O00000000© 











供 JavaScript、JavaScript 函数 、HTML 和 CSS 语言 的 Code Assist 功能 。 


显示 JavaScript、HTML 和 CSS 的 代码 结构 。 
支 3 
代码 语法 错误 提示 。 

支持 Aptana UI 自 定 义 和 扩 展 。 
支持 跨 平台 。 

支 3 
调试 JavaScript。 

支持 流行 Ajax 框架 的 Code Assist 功能 ， 包 括 AFLAX、Dojo、jQuery、MochiKit、 


寺 JavaScript、HTML 和 CSS 代码 提示 ， 包 括 JavaScript 自 定义 函数 。 





寺 FTP/SFTP。 


Prototype、 Rico、script.aculo.us、Yahoo UI 和 Ext。 
加 ”通过 插件 扩展 后 则 可 以 作为 Adobe AIR iPhone 和 Nakia 等 的 开发 工具 。 
加 ”提供 了 Eclipse 插件 。 














当然 Aptana 功能 强大 也 是 有 代价 的 ， 它 占用 电脑 内 存 比 较 多 。 可 以 在 http://www.aptana. com/ 
网 址 下 载 相应 的 软件 进行 安装 。 


要 使 Aptana 支持 jQuery 自动 提示 代码 功能 ， 非 党 简单 ， 只 要 下 载 一 个 jquery.ruble 文件 即 可 。 





可 以 去 https 












































://github.com/aptana/javascript-jquery.ruble 下 载 ， 这 个 文件 是 “.sdocml” 后 级 ， 并 将 之 

















放 到 你 的 项 





30 jQueryWTP 0 Spketl 











下 (当然 ，jQuery 文件 是 必须 引入 的 )。 插 件 效果 如 图 1-20 所 示 。 























jQueryWTP 和 Spket 这 两 款 插件 都 可 以 使 Eclipse 支持 jQuery 自动 提示 代码 功能 ， 可 以 分 别 在 
http://www.langtags.com/jquerywtp/ 和 http://spket.com/ 网 址 中 下 载 相应 的 插件 。 截 图 如 图 1-21 所 示 。 




















40 Visual Studio 2008 


























Visual Studio 是 Microsoft 公司 推出 的 程序 集成 开发 环境 ， 最 近 一 次 升级 (Visual Studio 2008) 
































之 后 便 可 以 使 用 jQuery 智能 提示 了 。 首 先 需 要 下 载 一 个 补丁 ， 地 址 如 下 ; 














http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?Releaseld=1736。 

















| 0 jQuery 

















hb — jqueryautof/index.htal 一 Aptana Studio 3 
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hen the DOM 


补丁 安装 好 后 ， 下 载 jquery.vsdoc.js (http://docs.jquery.com/Downloading jQuery) 文件， 把 

















它 与 jquery.js 文件 放 在 同一 个 文件 夹 下 。 最 后 在 页 面 中 用 <script> 标 签 引 入 jQuery 脚本 库 ，Visual 














Studio 2008 会 自动 识别 3 
所 示 。 
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EmEditor 和 VIM 等 等 。 


找到 jquery.vsdoc.js 文件 。 这 样 就 实现 了 代码 智能 提示 功 


























能 。 如 图 1-22 


由 于 jQuery 本 身 就 是 JavaScript， 因 此 也 可 以 使 用 任意 通用 文本 编辑 器 进行 开发 ， 例 如 EditPlus、 
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5 浊 html xmlns= “http: ww Ww3. org/1999/xhtml"> 
BO head runat="server” 








了 《title>cAtitle> 

8 script src="jquery-1.3.1.js" type="text/javascript">C/script> 
9 澡 《script type= text/javascript"> 

10s $div), cs 

11: /script 

12i| Yhead> 9 click <^ 

13i9 <body> =@ clone 


14 洱 <form id 
15 油 <div> 3@ constructor 国 


16: : contents 








17: Yaiv> | 
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19: Sbodyy = 龟 data 

20:L <html 
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合理 地 利用 这 些 工具 ， 能 节约 大 量 的 脚本 开发 时 间 。 


x [Ml 


本 章 前 半 部 分 简单 介绍 了 JavaScript， 同 时 也 对 目前 流行 的 儿 个 JavaScript 库 进行 了 介绍 和 对 
比 。 然 后 介绍 了 jQuery 的 由 来 和 优势 ， 接 下 来 编写 了 一 个 最 简单 的 jQuery 程序 。 在 程序 中 ， 接 触 
到 了 $(documentb).ready0， 此 外 还 约定 了 jQuery 的 代码 风格 和 变量 风格 。 
后 半 部 分 重点 介绍 了 jQuery 对 象 和 DOM 对 象 的 区 别 以 及 它们 之 间 的 相互 转换 ， 中 间 插 入 了 
一 个 简单 的 实例 用 来 加 强 对 jQuery 对 象 和 DOM 对 象 的 理解 。 然 后 讲解 了 如 何 解决 jQuery 和 其 他 
JavaScript 库 冲 突 的 问题 ， 帮 助 那些 项 目 上 已 经 使 用 了 其 他 JavaScript 库 的 使 用 者 。 最 后 介绍 了 儿 个 
jQuery 的 自动 提示 代码 功能 的 插件 。 
第 1 章 特 意 强 调 了 代码 风格 和 变量 风格 ，jQuery 对 象 和 DOM 对 象 ， 希 望 能 引起 初学 者 
的 注意 。 
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选择 器 是 jQuery 的 根基 , 在 jQuery 中 , 对 事件 处 理 、 人 遍历 DOM 和 Ajax 操作 都 依赖 于 选择 器 。 
如 果 能 熟练 地 使 用 选择 器 ， 不 仅 能 简化 代码 ， 而 且 可 以 达到 事半功倍 的 效果 。 


已 keiq 0 I 
i CS 0 0 


在 开始 学 习 jQuery 选择 器 之 前 ， 有 必要 简单 了 解 前 儿 年 流行 起 来 的 CSS (Cascading Style 
Sheets， 层 闭 样 式 表 ) 技术 。CSS 是 一 项 出 色 的 技术 ， 它 使 得 网 页 的 结构 和 表现 样式 完全 分 离 。 利 
用 CSS 选择 器 能 轻松 地 对 某 个 元 素 添加 样式 而 不 改动 HTML 结构 ， 只 需 通 过 添加 不 同 的 CSS 规则 ， 
就 可 以 得 到 各 种 不 同样 式 的 网 页 。 


要 使 某 个 样式 应 用 于 特定 的 HTML 元 素 ， 首 先 需要 找到 该 元 素 。 在 CSS 中 ， 执 行 这 一 任务 的 
表现 规则 称 为 CSS 选择 器 。 学 会 使 用 CSS 选择 器 是 学 习 CSS 的 基础 ， 它 为 在 获取 目标 元 素 之 后 施 
加 样式 提供 了 极 大 的 灵活 性 。 常 用 的 CSS 选择 器 分 类 如 表 2-1 所 示 。 






























































































































































表 2-1 常用 的 CSS 选择 器 
选 择 器 语 法 描 述 示 例 
td { 
font-size:14px:; 
Ef{ width:120px: 
标签 选择 器 CSS 规则 以 文档 元 素 作 为 选择 符 } 
} af 
text-decoration:none: 
} 
HD { #note{ 
六 文档 元 素 的 惟一 标识 符 :为 选 -Size， : 
ID 选择 器 Css 规则 以 文档 元 素 的 惟 标识 符 ID 作为 选 font size:14px: 
) 择 符 width:120px:; 
} 
div.notef{ 
lassiName font-size:14px; 
类 选择 器 Css 规则 以 文档 元 素 的 class 作为 选择 符 |) : 
} font-size:14px: 
} 















































选 储 时 语 法 描 述 示 例 
E1,E2,E3{ td,p,div.af 
群 组 选择 器 CSS 规则 多 个 选择 符 应 用 同样 的 样式 规则 font-size:14px; 
} } 
E F{ #1links a { 
后 代 选 择 器 CSS 规则 元 素 EE 的 任意 后 代 元 素 下 color:red; 
} } 
* { *{ 
通 配 选择 符 CSS 规则 以 文档 的 所 有 元 素 作 为 选择 符 font-size:14px; 
} } 
几乎 所 有 主流 浏览 器 都 支持 上 面 这 些 常用 的 选择 器 。 此 外 CSS 中 还 有 伪 类 选择 器 〈E:Pseudo- 



































Elements{ CssRules } )、 子 选择 器 (E > F{ CssRules })、 临 近 选 择 器 (E + FF { CssRules }) 和 属性 选 


择 器 (E [attr ] { CssRules }) 等 。 但 遗憾 的 是 ， 主 流 浏览 








器 并 非 完 全 文 持 所 有 的 CSS 选择 器 。 











更 加 详细 的 介绍 可 以 参考 http://www.w3.org/TR/CSS2/selector.html 网 址 。 


了 解 这 些 相 关 知识 后 ， 来 看 一 个 有 关 CSS 类 选择 器 的 简单 例子 ， 代 码 如 下 : 





<p style="color:red;font-size:30px;">CSS Demo</p> 


上 面 代码 的 意思 是 将 <p> 元 素 里 的 文本 颜色 设置 为 红 1 









































色 ， 字 体 大 小 设置 为 30px。 











四 这 样 把 CSS 代码 和 HTML 代码 混杂 在 一 起 的 











[ 














履 法 是 非常 不 有 的 ， 它 并 不 符合 表现 和 内 














离 的 设计 原则 ， 因 此 建议 使 用 下 面 的 方法 ， 代 码 如 





<Sty1e> 
.demof yalass em 
color:red; 
font-size:30px; 
} 
</style> 
<p class="demo">CSS Demo.</p> 












































Ds 































































































先 把 样式 写 在 <style> 标 签 里 ， 然 后 用 class 属性 将 元 素 和 样式 联系 起 来 ，class 作为 连接 样式 和 
网 页 结构 的 纽带 。 这 样 的 写法 不 仅 容 易 理 解 和 阅读 ， 而 且 当 需要 改变 一 些 样式 的 时 候 ， 只 要 在 <style> 
标签 里 改变 相关 的 样式 即 可 。 

例如 要 使 所 有 class 为 demo 的 <p> 元 素 里 的 字体 加 粗 ， 可 以 直接 在 <style> 里 编写 ， 而 不 需要 去 
网 页 里 寻找 所 有 class 为 demo 的 <p> 元 素 再 逐个 添加 样式 ， 代 码 如 下 : 

<Sty1e> 

.demo{ Relas Sem 
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color:red; 

font-size:30px: 

font-weight:bo1d; ya 
} 
</style> 
<p class="demo">CSS Demo.</p> 





注 : 把 CSS 应 用 到 网 页 中 有 3 种 方式 ， 即 行 间 样 式 表 、 内 部 样式 表 和 外 部 样式 表 。 上 例 中 使 用 的 
是 内 部 样式 表 ， 内 部 样式 表 的 缺点 是 不 能 被 多 个 页 面 重复 使 用 。 
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jQuery 中 的 选择 器 完全 继承 了 CSS 的 风格 。 利 用 jQuery 选择 器 ， 可 以 非常 便捷 和 快速 地 找 出 
特定 的 DOM 元 素 ， 然 后 为 它们 添加 相应 的 行为 ， 而 无 需 担心 浏览 器 是 否 文 持 这 一 选择 器 。 学 会 使 
用 选择 器 是 学 习 jQuery 的 基础 ，jQuery 的 行为 规则 都 必须 在 获取 到 元 素 后 才能 生效 。 


下 面 来 看 一 个 简单 的 例子 ， 代 码 如 下 : 




































































<script type="text/javascript"> 
function demo(){ 
alert('JavaScript demo.'); 


} 
</script> 
<p onclick="demo(); "30 0 0 .</p> 


本 段 代 人 码 的 作用 是 为 <p> 元 素 设 置 一 个 onclick 事件 ， 当 点击 我 
单 击 此 元 素 时 ,会 弹出 一 个 对 话 杠 ， 显 示 效 果 如 图 2-1 所 示 。 

像 上 面 这 样 把 JavaScript 代码 和 HTML 代码 混杂 在 一 起 
的 做 法 同样 也 非常 不 受 ， 因 为 它 并 没有 将 网 页 内 容 和 行为 分 
离 ， 所 以 建议 使 用 下 面 的 方法 ， 代 码 如 下 : 























全 JavaScript demo. 












































<p class="demo">jQuery Demo</p> 





<script type="text/javascript"> 
$(".demo").click(function(){ //D classD demo D000000 
alert("jQuery demo!"): 
局 
s/semne> 


此 时 ， 可 以 对 CSS 的 写法 和 jQuery 的 写法 进行 比较 。 
CSS 获取 到 元 素 的 代码 如 下 : 
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.demo{ //D class0 dem 00DDODODD 
} 
jQuery 获取 到 元 素 的 代码 如 下 : 








$(".demo").click(function(){ //D class0 demo0000000 








jQuery 选择 器 的 写法 与 CSS 选择 器 的 写法 十 分 相似 ， 只 不 过 两 者 的 作用 效果 不 同 ，CSS 选择 
器 找到 元 素 后 是 添加 样式 ， 而 jQuery 选择 器 找到 元 素 后 是 添加 行为 。 需 要 特别 说 明 的 是 ，jQuery 
中 涉及 操作 CSS 样式 的 部 分 比 单纯 的 CSS 功能 更 为 强大 ， 并 且 拥 有 路 浏览 器 的 兼容 性 。 


已 kewa000000 
IUD0OO0O0ODO0D 


$0 函数 在 很 多 JavaScript 类 库 中 都 被 作为 一 个 选择 器 函数 来 使 用 ， 在 jQuery 中 也 不 例外 。 其 
中 ，$("#D") 用 来 代 禁 document.getElementById0 函 数 ， 即 通过 ID 获取 元 素 ; $("tagName") 用 来 代 
奉 document.getElementsByTagName() 函 数 ， 即 通过 标签 名 获取 HTML 元 素 ; 其 他 选择 器 的 写法 可 


以 参见 第 2.3 节 。 































































































2000 CSS10 CSS 3000 

jQuery 选择 器 支持 CSS 1、CSS 2 的 全 部 和 CSS 3 的 部 分 选择 器 ， 同 时 它 也 有 少量 独 有 的 选择 器 ， 
因此 对 拥有 一 定 CSS 基础 的 开发 人 员 来 说 ， 学 习 jQuery 选择 器 是 件 非常 容易 的 事 ， 而 对 于 没有 接触 
过 CSS 技术 的 开发 人 员 来 说 ， 在 学 习 jQuery 选择 器 的 同时 也 可 以 掌握 CSS 选择 器 的 基本 规则 。 
月 CSS 选择 器 时 ， 开 发 人 员 需 要 考虑 主流 浏览 器 是 否 文 持 某 些 选择 器 。 而 在 jQuery 中 ， 开 
1 可 以 放心 地 使 用 jQuery 选择 器 而 无 需 考虑 浏览 器 是 否 文 持 这 些 选择 器 。 
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发 人 员 


注 














器 
注意 : 为 了 能 有 更 快 的 选择 器 解析 速度 ， 从 1.1.3.1 版 以 后 ，jQuery 废弃 了 不 常 使 用 的 XPath 选择 
器 ， 但 在 引用 相关 插件 后 ， 依 然 可 以 支持 XPath 选择 器 ( 详 见 第 2.7.1 小 节 )。 





300000000 




















使 用 jQuery 选择 器 不 仅 比 使 用 传统 的 getElementById0 和 getElementsByTagName0O 函 数 简洁 得 
而 且 还 能 避免 某 些 错误 。 看 下 面 这 个 例子 ， 代 码 如 下 : 














所 











<div>test</div> 
<script type="text/javascript"> 

document .getElementById("tt").style.color="red"; 
s/seme> 
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运行 上 面 的 代码 ， 浏 览 器 就 会 报错 ， 原 因 是 网 页 中 没有 id 为 “tt” 的 元 素 。 
改进 后 的 代码 如 下 : 




















<div>test</div> 

<script type="text/javascript"> 

if(document .getElementById("tt")){ 

document .getElementById("tt").style.color="red"; 
} 


Se 


这 样 就 可 以 避免 浏览 器 报错 ， 但 如 果 要 操作 的 元 素 很 多 ， 可 能 对 每 个 元 素 都 要 进行 一 次 判断 ， 


量 重 复 的 工作 会 使 开发 人 员 感 到 厌倦 ， 而 jQuery 在 这 方面 问题 上 的 处 理 是 非常 不 错 的 ， 即 使 用 
jQuery 获取 网 页 中 不 存在 的 元 素 也 不 会 报错 ， 看 下 面 的 例子 ， 代 码 如 下 : 



















































































<div>test</div> 
<script type="text/javascript"> 

WO A Aess( color erred de //000000$(#tt')0000 
</script> 























有 了 这 个 预防 措施 , 即使 以 后 因为 某 种 原因 删除 网 页 上 某 个 以 前 使 用 过 的 元 素 ,， 也 不 用 担心 这 
个 网 页 的 JavaScript 代码 会 报错 。 

需要 注意 的 是 ，$(C#tt) 获 取 的 永远 是 对 象 ， 即 使 网 页 上 没有 此 元 素 。 因 此 当 要 用 jQuery 检查 某 
个 元 素 在 网 页 上 是 否 存 在 时 ， 不 能 使 用 以 下 代码 : 


DC Se 
//do something 

































































} 
而 应 该 根据 获取 到 元 素 的 长 度 来 判断 ， 代 码 如 下 : 





if ( $C("#tt").length > 0 ) { 
//do something 
b 


或 者 转化 成 DOM 对 象 来 判断 ， 代 码 如 下 : 


1 人 
//do something 














} 
EE wig 0 00 


在 正式 学 习 jQuery 选择 器 之 前 ， 先 看 儿 组 用 传统 的 JavaScript 方法 获取 页 图 














的 元 素 , 然后 给 
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元 素 添 加 行为 事件 的 例子 。 
例子 1: 给 网 页 中 的 所 有 <p> 元 素 添加 onclick 事 
HTML 代码 如 下 : 














| 中 
证 
o 





<p>0 0 1</p> 
<p>0 0 2</p> 


要 做 的 工作 有 以 下 几 项 。 
(1) 获取 所 有 的 <p> 元 素 。 
(2) 对 <p> 元 素 进行 循环 〈 因 为 获取 的 是 数组 对 象 )。 


(3) 给 每 个 <p> 元 素 添 加 行为 事件 。 





























JavaScript 代码 如 下 : 


var items = document.getElementsByTagName("p")://0 0000000 p00 


ora 0 eensalengen VON 
items[i].onclick = function(){ VAT oe 
//doing something 


) 
} 


例子 2: 使 一 个 特定 的 表格 隔行 变色 。 
HTML 代码 如 下 : 





<table id="tb"> 
<tbody> 
< < 0 | /ieee (0 | < 
a | ios | < 
< os | so 
GS/ 
b> Gd 
b> 
</tbody> 
</table> 


要 做 的 工作 有 以 下 儿 项 。 

(1) 根据 表格 id 获取 表格 。 

(2) 在 表格 内 获取 <tbody> 元 素 。 
(3) 在 <tbody> 元 素 下 获取 <tr> 元 素 。 

















(4) 循环 输出 获取 的 <tr> 元 素 。 








020 jQuery000 





(5) 对 <tr> 元 素 的 索引 值 除 以 2 并 取 模 ， 然 后 根据 奇 侦 设 置 不 同 的 背景 色 。 





JavaScript 代码 如 下 : 


var item = document .getElementById("tb") 





var tbody = item.getElementsByTagName("tbody")[0]: 


var trs = tbody.getElementsByTagName( "tr 
for(var nEO < rs lengtme ee 
if(i%2==0){ 


四 


trs[i].style.backgroundColor = "#888": 


) 
例子 3: 对 多 选 框 进行 操作 ， 输 出 选 
HTML 代码 如 下 : 


<input type="checkbox” value="1" mames check”checked= 





FP 的 多 选 相 


/D0 
/000 
//0D0 
//0D0 
/000 





tbody D00000 trO0 
tr00 





/000 





<input type="checkbox" value="2" name="check" /> 


<input type="checkbox” value="3" name="check” checked= 


























val ee 


000 10 tbody0 0 





Qn oo | 02a == 2 0 = 
a 








匡 的 个 数 。 


<input type="button”value=" 虽 ODDOOD" id"btn"/> 





要 做 的 工作 有 以 下 几 项 。 
(1) 新 建 一 个 空 数组 。 








(2) 获取 所 有 name 为 “check” 的 多 选 框 。 
(3) 循环 判断 多 选 框 是 否 被 选中 ， 如 果 被 选中 则 添加 到 数组 里 。 
(4) 获取 输出 按钮 ， 然 后 为 按钮 添加 onclick 事件 ， 输 出 数组 的 长 度 即 可 。 












































JavaScript 代码 如 下 : 


var btn = document.getElementById("btn") 
btn.onclick = function(){ 
var arrays = new Array() : 


for(i=0; i<items.length; i++){ 
if(items[i].checked){ 
arrays.push(items[i].value): 








“Checked /> 


“checked /> 


WA I we oxen nn svn ete 
vomelnieka 
加 加 加 加 
var items = document .getElementsByName("check"): 
//[D DO nameD check 0 O000D0 checkboxD 
WAN 
VAN 
放生 轩辕 
Wus hy avas enn 
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} 


alert( "DO000000"+arrays.length ) 




















些 虽 然 都 是 JavaScript 


F 面 的 几 个 例子 都 是 
getElementsByTagName() 和 





三 
局 地 加 














全 


























传统 的 JavaScript 方法 进行 操作 ， 中 间 使 用 了 getElement ByIdO、 
getElementsByName() 等 方法 ， 然 后 动态 地 给 元 素 添加 行为 或 者 样式 。 这 
单 的 操作 ， 但 不 断 重 复 使 用 getElementById0 和 getElementsByTagName() 





























等 见长 而 难 记 的 名 称 ， 使 越 来 越 多 的 开发 人 员 开始 厌倦 这 种 枯燥 的 写法 ， 并 且 有 时 候 为 了 获取 网 页 中 
的 某 个 元 素 ， 需 要 编写 很 多 的 getElementById0 和 getElementsByTagName() 方 法 。 人 然而 在 jQuery 
中 ， 类 似 的 这 些 操作 则 非常 简洁 。 





下 面 学 习 如 何 使 有 























日 jQuery 获取 这 些 元 素 。 





jQuery 选择 器 分 为 基本 选择 器 、 层 次 选择 器 、 过 滤 选 择 器 和 表单 选择 器 。 在 下 面 的 章节 中 将 分 
别 用 不 同 的 选择 器 来 查找 HTML 代码 中 的 元 素 并 对 其 进行 简单 的 操作 。 为 了 能 更 清晰 、 直 观 地 讲 
解 选 择 器 ， 首 先 需要 设计 一 个 简单 的 页 面 ， 里 面包 含 各 种 <div> 元 素 和 <span> 元 素 ， 然 后 使 用 jQuery 



















































































选择 器 来 匹配 元 素 并 调整 它们 的 样式 。 





















































新 建 一 个 空白 页 面 ， 输 入 以 下 HTML 代码 : 
<div class="one" id="one"” > 
id0 one,class0D oneD div 
<div class="mini">classD mini</div> 
</div> 
<div class="one” id="two" title="test” > 
id0 two,class0 one,titleD test0 div. 
<div class="mini" title="other">class0D mini,titleD other</div> 
<div class="mini" title="test">class0D mini,title0D test</div> 
</div> 
<div class="one"> 
<div class="mini">class0D mini</div> 
<div class="mini">classD mini</div> 
<div class="mini">class0 mini</div> 
<div class="mini"></div> 
</div> 
<div class="one"> 
<div class="mini">class0 mini</div> 
<div class="mini">class 0D mini</div> 
<div class="mini">class0 mini</div> 
<div class="mini" title="tesst">class0D mini,titleD tesst</div> 
</div> 
<div style="display:none;" class="none"> 
style0D displayD "none"D div 





</div> 
<div class="hide">class0 "hide"D div</div> 
<div> 
00 input 0 typeD "hidden"D div<input type="hidden" size="8"/> 
</div> 


<span id="mover">0 000000 span00g .</span> 
然后 用 CSS 对 这 些 元 素 进行 初始 化 大 小 和 背景 颜色 的 设置 ，CSS 代码 如 下 : 





div,span,p { 
width:140px: 
height:140px: 
margin:5px; 
background:#aaa: 
border:#000 lpx solid: 
float:left:; 
font-size:17px; 
font-family:Verdana: 

} 

div.mini { 
width:55px; 
height :55px; 
background-color: #aaa: 
font-size:12px; 

} 

div.hide { 
display:none; 


} 
根据 以 上 HTML+CSS 代码 ， 可 以 生成 图 2-2 所 示 的 页 面 效 果 。 
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的 介绍 说 明 如 表 2-2 所 示 。 








基本 选择 器 是 jQuery 中 最 常用 的 选择 器 ， 也 是 最 简单 的 选择 器 ， 它 通过 元 素 id、class 和 标签 
只 能 


名 等 来 查找 DOM 元 素 。 在 网 页 中 ， 每 个 id 名 称 只 能 使 用 一 次 ，class 允许 重复 使 用 。 基 本 选择 器 



























































表 2-2 基本 选择 器 

选 择 器 描 述 返回 示 例 
#id 根据 给 定 的 id 匹配 一 个 元 素 单个 元 素 $("#test") 选 取 id 为 test 的 元 素 
.class 根据 给 定 的 类 名 匹配 元 素 集合 元 素 $(".test") 选 取 所 有 class 为 test 的 元 素 
element 根据 给 定 的 元 素 名 匹配 元 素 集合 元 素 $("p") 选 取 所 有 的 <p> 元 素 
" 匹配 所 有 元 素 集合 元 素 $("*") 选 取 所 有 的 元 素 
weeiorl，selecto2， | 将 每 一 个 选择 吕 本 到 的 元 素 合 | 信人 元 表 。 | cspaus 和 搬入 mnyCls 的 < 和 
ee ， selectorN 并 后 一 起 返 区 的 一 组 元 素 








可 以 使 用 这 些 基本 选择 器 来 完成 绝 大 多 数 的 工作 。 
<div>，<span> 等 元 素 并 进行 操作 (改变 背景 色 )， 示 例如 表 2-3 所 示 。 

















下 




















用 用 它们 来 匹配 刚才 HTML 代码 中 的 











表 2-3 基本 选择 器 示例 
功 能 全 码 执 行 
改变 id 为 one 的 元 素 | $(“#one”) 
的 背景 色 .css("background","#bbffaa"): 
改变 class 为 mini 的 所 | $(*.mini”) 
有 元 素 的 背景 色 .css("background", "#bbffaa"): 
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功 能 外 带 
改变 元 素 名 是 <div> 的 | $("div") 
所 有 元 素 的 背景 色 .Css("background","#bbffaa"): 
改变 所 有 元 素 的 背景 色 | ”) 
ee .CSS("background" ,"#bbffaa"): 

改变 所 有 的 <span> 元 $("span, #two”) 

素 和 id 为 two 的 元 素 n i 
的 背景 色 .CSS("background" "#bbffaa"): 








232 0000D0 








如 果 想 通过 DOM 元 素 之 间 的 层次 关系 来 获取 特定 元 素 ， 例 如 后 代 元 素 、 子 元 素 、 相 邻 元 素 和 





同 非 元 素 等 ， 那 么 层次 选择 器 是 一 个 非常 好 的 选择 。 层 次 选择 器 的 介绍 说 明 如 表 2-4 所 示 。 














表 2-4 层次 选择 器 
选 择 器 描 述 回 示 例 
i 选取 ancestor 元 素 里 的 所 有 $("div span") 选 取 <div> 里 的 所 有 
$("ancestor descendant") descendant 后代) 元素 素 的 <span> 元 素 
选取 parent 元 素 下 的 child《〈 子 ) 元 
素 ， 与 $("ancestor descendant") 有 区 . 元 素 $("div > span") 选 取 <div> 元 素 下 
的 


$("parent > child") 





别 ，$("ancestor descendant") 选 择 
是 后 代 元 素 











元 素 名 是 <span> 的 子 元 素 
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选 择 器 描 述 返回 示 例 
员 | 本 本 本 $(“.one + div”) 选 取 class 为 one 的 
$(“prev + next”) 选取 紧 接 在 prev 元 素 后 的 next 元 素 | 集合 元 素 下 一 个 <div> 同 斐 元 素 





选取 prev 元 素 之 后 的 所 有 siblings 


$CPprev 一 siblings 元 素 集合 元 素 $0#two~~div”) 选 取 记 为 two 的 元 


素 后 面 的 所 有 <div> 同 非 元 素 





























继续 沿用 刚才 例子 中 的 HTML 和 CSS 代码 ， 然 后 用 层次 选择 器 来 对 网 页 中 的 <div>，<span> 
等 元 素 进行 操作 ， 示 例如 表 2-5 所 示 。 
表 2-5 层次 选择 器 示例 
功 能 代码 





改变 <body> 内 所 有 $(“body div”) 
<div> 的 背景 色 .css("background","#bbffaa"): 








改变 <body> 内 子 $(“body > div”) 
<div> 元 素 的 背景 色 .css("background","#bbffaa"): 





改变 class 为 one 的 $(".one + div”) 
下 一 个 <div> 同 辈 元 en 
卖 背 景色 .css("background", "#bbffaa"): 








改变 这 为 two 的 元 素 | (qtwo ~ div") 
后 面 的 所 有 <div> 同 Me 宙 入 
斐 元 素 的 背景 色 .css("background", "#bbffaa"): 























0 20 jQuery000 




















在 层次 选择 器 中 ， 第 1 个 和 第 2 个 选择 器 比较 常用 
简单 的 方法 代 蔡 ， 所 以 使 用 的 几率 相对 少 些 。 























而 后 面 两 个 因为 在 jQuery 里 可 以 用 更 加 



































可 以 使 用 next(0) 方 法 来 代替 $(Cprev + next') 选择 器 ， 如 表 2-6 所 示 。 








表 2-6 $('prev + next') 选 择 器 与 next() 方 法 的 等 价 关系 
选 择 器 方 法 
等 价 关 系 $(".one + div"): $(".one").next("div"): 























可 以 使 用 nextAl10 方 法 来 代替 $(prev~siblings) 选 择 器 ， 如 表 2-7 所 示 。 





表 2-7 $(prev~siblings) 选 择 器 与 nextAll() 方 法 的 等 价 关 系 
选 择 器 方 “法 
等 价 关系 $("#prev~div"); $("#prev").nextAll("div"):; 


























在 此 我 将 后 面 要 讲解 的 siblings(O 方 法 拿 出 来 与 $Cprev~siblings) 选 择 器 进行 比较 。$(#prev 一 
div) 选 择 器 只 能 选择 “prev” 元 素 后 面 的 同辈 <div> 元 素 。 而 siblings0 方 法 与 前 后 位 置 无 关 ， 只 要 
是 同 斐 节点 就 都 能 匹配 。 












































ere 

$("#prev ~ div”).css("background", "#bbffaa"): 
vl 
$("#prev”).nextAll("div").css("background", "#bbffaa"): 
a Oe i 
$("#prev").siblings("div").css("background","#bbffaa"): 
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过 滤 选 择 器 主要 是 通过 特定 的 过 滤 规 则 来 筛选 出 所 需 的 DOM 元 素 ， 过 滤 规 则 与 CSS 中 
的 伪 类 选择 器 语法 相同 ， 即 选择 器 都 以 一 个 冒号 (开头 。 按 照 不 同 的 过 滤 规 则 ， 过 滤 选 择 器 
可 以 分 为 基本 过 滤 、 内 容 过 滤 、 可 见 性 过 滤 、 属 性 过 滤 、 子 元 素 过 滤 和 表单 对 象 属性 过 滤 选 
尘 器 。 
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表 2-8 基本 过 渡 选 择 器 
选 择 器 描述 返 回 示 例 
ee 选取 第 1 个 元 过 单个 元 素 SCdiv:first) 选 取 所 有 <div> 元 素 中 第 工 个 <div> 
妃 条 
和 i 2 外 Hy 6 : 过 专员 有 旦 = 
last 选取 最 后 一 个 元 素 单个 元 素 4 
<div> 元 系 












































































































































续 表 
选 择 器 描 述 返 回 示 例 

去 除 所 有 与 给 定 选择 器 匹 $("input:not(.myClass)") 选 取 class 不 是 myClass 

:not(selector) 配 的 元 素 集合 元 素 的 <inputy 元 素 

:even 集合 元 素 $("input:even") 选 取 索 引 是 个 数 的 <input> 元 素 

:odd 本 ed 有 元 合 元 素 $COinput:odd") 选 取 索 引 是 奇数 的 <input> 元 素 

:eq(index) de 的 元 素 单个 元 素 $("input:eq(1)") 选 取 索 引 等 于 1 的 <input> 元 素 

A 选取 索引 大 于 index 的 元 素 区 $("input:gt(1)") 选 取 索 引 大 于 1 的 <input> 元 素 

Bdey Cindex 从 0 开始) 集合 元 素 ( 注 : 大 于 1， 而 不 包括 1) 

i 选取 索引 小 于 index 的 元 素 EE $("input:1t(1)") 选 取 索 引 小 于 1 的 <input> 元 素 

Wy Gindex 从 0 开始 ) 和 ( 注 ， 小 于 1， 而 不 包括 1) 

. 选取 所 有 的 标题 元 素 , 例如 三 $(":header") 选 取 网 页 中 所 有 的 <h1>，<h2>， 

:header hl，h2，h3 等 等 集合 元 素 <h3>……: 

et 选取 当前 正在 执行 动画 的 二 $("div:animated") 选 取 正 在 执行 动画 的 <div> 

:animated 所 有 元 素 集合 元 素 元 素 

:focus 选取 当前 获取 焦点 的 元 素 集合 元 素 $(':focus') 选取 当前 获取 焦点 的 元 素 











接 下 来 ， 使 用 这 些 基 本 过 滤 选 择 器 来 对 网 页 中 的 <div>，<span> 等 元 素 进行 操作 ， 示 例如 表 2-9 
所 示 。 
表 2-9 基本 过 滤 选 择 器 示例 
功 能 代码 执 行 后 











改变 第 1 个 <div> 元 素 | $(“div:first") 
的 背景 色 .css("background", "#bbffaa"): 








改变 最 后 一 个 <div> 元 | $("div:1ast”) 
素 的 背景 色 .css("background", "#bbffaa"): 
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改变 class 不 为 one 的 | $("div:not(.one)") 

<div> 元 素 的 背景 色 .CSS("background" , "加 bffaa"): 
改变 索引 值 为 偶数 的 | $("div:even”) 

<div> 元 素 的 背景 色 .CSS("background" "#bbffaa"): 
改变 索引 值 为 奇数 的 | $("div:0dd”) 

<div> 元 素 的 背景 色 .CSS("background" "#bbffaa"): 
改变 索引 值 等 于 3 的 | $("div:eq(3)") 

<div> 元 素 的 背景 色 .css("background", "#bbffaa"): 
改变 索引 值 大 于 3 的 | $("*div:gt(3)") 

<div> 元 素 的 背景 色 .Css("background","#bbffaa"): 
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改变 索引 值 小 于 3 的 | $C("div:1t(3)”) 











<div> 元 素 的 背景 色 .css("background","#bbffaa"): 
改变 所 有 的 标题 元 

素 , 例如 <hl>, <h2>,，| $(":header") 

<h3>…… 这 些 元 素 的 .css("background", "#bbffaa"): 
背景 色 








改变 当前 正在 执行 动 | $(":animated"”) 




















画 的 元 素 的 背景 色 .css("background", "#bbffaa"): 
改变 当前 获取 焦点 的 “| $(":focus") 选择 当前 正在 执行 动画 的 所 有 元 素 , 
元 素 的 背景 色 .css("background","#bbffaa"): _ 选 择 当 前 获取 焦点 的 所 有 元 素 ，| 
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内 容 过 滤 选 择 器 的 过 滤 规 则 主要 体现 在 它 所 包含 的 子 元 素 或 文本 内 容 上 。 内 容 过 滤 选 择 器 的 介 
绍 说 明 如 表 2-10 所 示 。 





























表 2-10 内 容 过 滤 选 择 器 
选 择 器 描 述 返 回 示 例 
:contains(text) 选取 含有 文本 内 容 为 “text” 的 元 素 合 元 素 A 
Wivw: 1 ~ 分 i 
:empty 选取 不 包含 子 元 素 或 者 文本 的 空 元 素 。 | 集合 元 素 。 “| 和 Yiempty ) 选 家 个 包 合子 元素 《包括 


文本 元 素 ) 的 <div> 空 元 素 
$("div:has(p)") 选 取 含 有 <p> 元 素 的 
<div> 元 素 


$("div:parent") 选 取 拥 有 子 元 素 〈 包 括 文 
本 元 素 ) 的 <div> 元 素 




















:has(selector) 选取 含有 选择 器 所 匹配 的 元 素 的 元 素 集合 元 素 








:parent 选取 含有 子 元 素 或 者 文本 的 元 素 合 元 素 











接 下 来 使 用 内 容 过 小 选择 器 来 操作 页 面 中 的 元 素 ， 示 例如 表 2-11 所 示 。 











表 2-11 内 容 过 滤 选 择 器 示例 
功 能 和 息 执 行 后 
改变 含有 文本 “di” 的 | $(*div:contains(di)”) 
<div> 元 素 的 背景 色 .css("background", "#bbffaa"): 
改变 不 包含 子 元 素 ( 包 a » 
括 文本 元 素 ) 的 <div> $( vn ) i 
空 元 素 的 背景 色 .Css("background", "#bbffaa") 








改变 含有 class 为 mini 
元 素 的 <div> 元 素 的 背 


景色 


$("div:has(’ mini )") 


.CSS("background" "#bbffaa"): 





改变 含有 子 元 素 ( 包 括 
文本 元 素 ) 的 <div> 元 


素 的 背景 色 











$ ("div:parent") 


.CSS("background" "#bbffaa"): 


3000000000 


可 见 性 过 滤 选 择 器 是 根据 元 素 的 可 见 和 不 可 见 状态 来 选择 相应 的 元 素 。 可 见 性 过 滤 选 择 器 的 介 
绍 说 明 如 表 2-12 所 示 。 
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表 2-12 可 见 性 过 滤 选 择 器 
选 择 器 描述 返 回 示例 
$(":hidden") 选取 所 有 不 可 见 的 元 素 。 包 括 <input 
hidden 选取 所 有 不 可 见 的 元 素 。 “| 集合 元 素 ee 
<input> 元 素 ， 可 以 使 用 $("input:hidden") 
:visible 选取 所 有 可 见 的 元 素 合 元 素 $("div:visible") 选 取 所 有 可 见 的 <div> 元 素 











在 例子 中 使 用 这 些 选 择 器 来 操作 DOM 元 素 ， 示 例如 表 2-13 所 示 。 


表 2-13 可 见 性 过 滤 选 择 器 示例 
功 能 震 ” 码 








执 行 后 
改变 所 有 可 见 的 <div> | $("*div:visible”) 本 外 加 有 
元 素 的 背景 色 .css("background", "#FF6500"): 目下 | Ee | 
















tyle 的 display lass 为 "hide "的 
"none" 的 div iv 


在 可 见 性 选择 器 中 ， 需 要 注意 选择 器 :hidden， 它 不 仅 包 括 样式 属性 display 为 “none” 的 元 素 ， 
也 包括 文本 隐藏 域 (xinput type="hidden" />) 和 visibility:hidden 之 类 的 元 素 。 











显示 隐藏 的 <div> 元 素 | $(*div:hidden”).show(3000); 


























注意 : show0O 是 jQuery 的 方法 ， 它 的 功能 是 显示 元 素 ，3000 是 时 间 ， 单 位 是 毫秒 。 
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属性 过 滤 选 择 器 的 过 滤 规 则 是 通过 元 素 的 属性 来 获取 相应 的 元 素 。 属 性 过 滤 选 择 器 的 介绍 说 明 
如 表 2-14 所 示 。 



































































































































































































































表 2-14 属性 过 滤 选 择 器 

选 择 器 描 述 返 回 示 例 
[attribute] 选取 拥有 此 属性 的 元 素 集合 元 素 $("div[id]") 选 取 拥 有 属性 id 的 元 素 
[attribute=value] 选取 属性 的 值 为 value 的 元 素 集合 元 素 ap ee 

$("div[title!=test]") 选 取 属 性 title 不 等 于 
[attribute!=value] 选取 属性 的 值 不 等 于 value 的 元 素 | 集合 元 素 “test” 的 <div> 元 素 (注意 : 没有 属性 title 
的 <div> 元 素 也 会 被 选取 ) 

ee 野性 的 信和 中 本 和 $("div[title^=test]") 选 取 属性 title 以 “test” 
[attribute^=value] 选取 属性 的 值 以 value 开始 的 元 素 | 集合 元 素 开始 的 <div> 元 素 
[attribute$=value] 选取 属性 的 值 以 value 结束 的 元 素 | 集合 元 素 ee 人 

. se a , A $("div[title*=test]") 选 取 属 性 title 含有 
[attribute*=value] 选取 属性 的 值 含有 value 的 元 素 集合 元 素 “test” 的 < div> 元 素 

选取 属性 等 于 给 定 字 符 串 或 以 该 $('div[title|="en"]) 选取 属性 title 等 于 en 
[attribute|=value] 字符 串 为 前 级 (该 字符 串 后 跟 一 个 | 集合 元 素 或 以 en 为 前 级 (该 字符 串 后 跟 一 个 连 字 
连 字 符 “-”) 的 元 素 符 '-') 的 元 素 

; _ 选取 属性 用 空格 分 隔 的 值 中 包含 人 二 $('div[title~="uk"]) 选 取 属 性 title 用 空格 分 
latibuteevalue] | 王 个 络 启 信 的 元 于 生生 下 要 隔 的 值 中 包含 字符 uk 的 元 素 

7 用 属性 选择 器 合并 成 一 个 复合 属 
[attribute1][attribute2] 个 关 , 冯 $("div[id][title$='test]") 选 取 拥有 属性 id ， 
[attributeN] 性 选择 器 ， 人 条件。 每 选择 | 集合 元 素 并 且 属 性 title 以 “test” 结 束 的 <div> 元 素 

次 ， 缩 小 一 次 范围 
接 下 来 使 用 属性 过 滤 选 择 器 来 对 <div> 和 <span> 等 元 素 进行 操作 ， 示 例如 表 2-15 所 示 。 
表 2-15 属性 过 滤 选 择 器 示例 
功 能 Me 执 行 后 

改变 含有 属性 tile 的 | $("div[title]”) 
<div> 元 素 的 背景 色 .css("background","#bbffaa"): 





改变 属性 title 值 等 于 
“test” 的 <div> 元 素 的 
背景 色 














$("div[title=test]") 
.Css("background", "#bbffaa"): 
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改变 属性 ie 值 不 等 | $Crdiv[titlel=test]”) 
于 “test” 的 <div> 元 素 5 这 和 
的 背景 色 .css("background","#bbffaa"); 


已 











改变 属性 iue 值 以 "te ”| $Cdiv[title“=te]”) 
始 的 <div> 元 素 的 背 
景色 .Css("background", "#bbffaa"): 


























改变 属性 title 值 以 
“est” 结 束 的 <div> 元 
素 的 背景 色 





$("div[title$=est]") 
.Css("background","#bbffaa"): 











恋 屋 性 于 今 
改变 属性 title 值 含有 | $("div[titlex=es]") 

es” 的 <div> 元 素 的 
背景 色 .CSS("background" "#bbffaa"): 














改变 含有 属性 id, 并 且 RE 
属性 title 值 含有 “es” | 8 div[id]It 让 le es] ) 


的 <div> 元 素 的 背景 色 .Css("background", "#bbffaa"): 


已 
































jQuery 属性 选择 器 的 过 滤 规 则 比较 多 ,特别 容易 混淆 。 为 此 , 我 把 儿 个 容易 混淆 的 单独 做 了 一 
个 例子 ， 以 加 强 印象 。、HTML 代码 如 下 : 

<div title="en">titleD enD divy0D </div> 

<div title="en-UK">title0D en-UKO div0O 0 </div> 

<div title="english">title[D english0 divDD </div> 


<div title="en uk">titleD en ukDO divDD </div> 
<div title="uken">titleD ukenD divO 0 </div> 


生成 的 效果 图 如 图 2-3 所 示 。 
















































D023 0000 

现在 用 jQuery 的 表单 过 滤 选 择 器 来 操作 它们 ， 示 例如 表 2-16 所 示 。 

表 2-16 属性 过 滤 选 择 器 示例 

功 能 代码 执 行 后 
Pc ee es ds | | 请 
图 浊 .css("background","#bbffaa") 
i | 间 | 
于 de 值 全 | SCdivlttler='en) | | | 

时 .css("background","#bbffaa") 
素 的 背景 色 
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届 性 title 等 于 

te 串 后 跟 一 $('div[title|="en"]') 
个 连 字 符 - ) 的 元 素 
的 背景 色 








.Css("background","#bbffaa") 























改变 属性 title 用 空 
格 分 隔 的 值 中 包含 ”| $('div[title~="uk"]") 
字符 uk 的 元 素 的 背 .css("background","#bbffaa") 


三 
景色 
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子 元 素 过 滤 选 择 器 的 过 滤 规 则 相对 于 其 它 的 选择 器 稍微 有 些 复杂 , 不 过 没关系 , 只 要 将 元 素 的 
元 素 和 子 元 素 区 分 清楚 ， 那 么 使 用 起 来 也 非常 简单 。 男 外 还 要 注意 它 与 普通 的 过 小 选择 器 的 区 别 。 


子 元 素 过 小 选择 器 的 介绍 说 明 如 表 2-17 所 示 。 








































































































表 2-17 子 元 素 过 滤 选 择 器 
选 择 器 描 述 返 回 示 例 
:nth-child a :eq(index) 只 匹配 一 个 元 素 ， 而 :nth-child 将 为 每 一 
Chaexfevenl Re 0 We 集合 元 素 | 个 父 元 素 匹配 子 元 素 ， 并 有 :nth-childtindex) 的 index 
odd/equation) DR ESE 是 从 1 开始 的 ， 而 :eq(index) 是 从 0 算 起 的 
:first 只 返回 单个 元 素 , 而 :first-child 选择 符 将 为 每 
个 父 元 素 匹 配 第 1 个 子 元 素 。 
:first-child i 个 父 元 素 的 第 1 个 子 元 素 合 元 素 
irst-chi 选取 每 个 父 元 素 的 第 1 个 子 元 素 集合 元 素 例如 SCal lifirstchild"): 选取 每 个 <al> 中 第 1 个 
<li> 元 素 
同样 ，:last 只 返回 单个 元 素 ， 而 :last-child 选择 符 
将 为 每 个 父 元 素 匹 配 最 后 一 个 子 元 素 。 
:last-child i 个 父 元 素 的 最 后 一 个 子 元 素 合 元 素 
ast-c 选取 每 个 父 元 素 的 最 后 一 个 子 元 素 ”| 集合 元 素 例如 Seaul lilastchild); 选择 每 个 <ul> 中 最 后 一 个 
<li> 元 素 
如 果 某 个 元 素 是 它 父 元 素 中 惟一 的 a a 由 省 本 瑟 性 地 于 
:only-child 子 元 素 ,那么 将 会 被 匹配 。 如 果 父 元 | 集合 元 素 人 在 <ul> 中 选取 是 惟一 子 元 素 
素 中 含有 其 他 元 素 ， 则 不 会 被 匹配 : 

















:nth-childO0 选 择 器 是 很 常用 的 子 元 素 过 滤 选 择 器 ， 详 细 功能 如 下 。 

(1) :nth-child(even) 能 选取 每 个 父 元 素 下 的 索引 值 是 偶数 的 元 素 。 

(2) :nth-child(odd) 能 选取 每 个 父 元 素 下 的 索引 值 是 奇数 的 元 素 。 

(3) :nth-child(2) 能 选取 每 个 父 元 素 下 的 索引 值 等 于 2 的 元 素 。 

(4) :nth-child(3n) 能 选取 每 个 父 元 素 下 的 索引 值 是 3 的 倍数 的 元 素 ，(n 从 1 开始 )。 
(5) :nth-child(3n+1) 能 选取 每 个 父 元 素 下 的 索引 值 是 (3n+1》 的 元 素 。(n 从 1 开始 ) 
接 下 来 利用 刚才 所 讲 的 选择 器 来 改变 <div> 元 素 的 背景 色 ， 示 例如 表 2-18 所 示 。 


表 2-18 子 元 素 过 滤 选 择 器 示例 
功 能 人 执行 后 





ws - 站 BE FH 
one 的 <div> 父 元 素 $(“div.one :nth-child(2)") 

下 的 第 2 个子 元 素 .css("background","#bbffaa"): 

的 背景 色 


— 





















改变 每 个 class 为 

one 的 <div> 父 元 素 $(“div.one :first-child”) 

下 的 第 1 个 子 元 素 .css("background", "#bbffaa"): 

的 背景 色 

“ a 自 相 中 
one 的 <div> 父 元 素 $("div.one :1ast-child”) 

下 的 最 后 一 个 子 元 .css("background","#bbffaa"): 

素 的 背景 色 





引 加 
0 下 内 ， a 站 相 | 
<div> 父 元 素 下 只 有 $("div.one :only-child”) 


一 个 子 元 素 , 那么 则 


改变 这 个 子 元 素 的 .Css("background", "#bbffaa"): 
背景 色 

















一 
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000 jQueyI0 200 





注意 : eq(index) 只 匹配 一 个 元 素 ， 而 :nth-child 将 为 每 一 个 符合 条 件 的 父 元 素 匹 配子 元 素 。 同 时 应 该 
注意 到 nth-child(index) 的 index 是 从 1 开始 的 ， Se 同 理 :first 
和 :first-child，:last 和 :last-child 也 类 似 。 
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此 选择 器 主要 是 对 所 选择 的 表单 元 素 进行 过 滤 ， 例如 选择 被 选中 的 下 拉 框 ,多 选 框 等 元 素 。 表 
单 对 象 属性 过 小 选择 器 的 介绍 说 明 如 表 2-19 所 示 。 









































































































































表 2-19 表单 对 象 属性 过 滤 选 择 器 
选 择 器 描 述 返 回 示 例 
ce 村 a $("#forml :enabled"): 选 取 id 为 “form1” 的 
先 卫 所 有 华 翁 元 妻 
:enabled 选取 所 有 可 用 元 素 人 全 刀 系 表单 内 的 所 有 可 用 元 素 
. ee $("#form2 :disabled") 选 取 id 为 “form2” 的 
， 所 右 不 用 集合 元 素 _ Pt 
:disabled 选取 所 有 不 可 用 元 素 条 全 元 系 表单 内 的 所 有 不 可 用 元 素 
本 先 人 所 有 被 选中 的 元 素 〈 单 选 框 ， 集合 元 素 $C"input:checked" ); 选 取 所 有 被 选中 的 <input> 
复 选 框 ) 元 素 
| 选取 所 有 被 选中 的 选项 元 素 ( 下 拉 集合 元 素 $Cselect option:selected ): 选 取 所 有 被 选中 的 
列表 ) 选项 元 素 

















为 了 演示 这 些 选择 器 ， 需 要 制作 一 个 包含 表单 的 网 页 ， 里面 要 包含 文本 框 、 多 选 框 和 下 拉 列 
表 ，HTML 代码 如 下 : 




















<form id="forml" action="#"> 
O0000<input name="add” value="000O00"/2 <br/> 
000000<input name="email" disabled="disabled" value="0 0 0000"/><br/> 
口 口 口 口 口 <input name=s "che”values=s'" 口 口 口 串口 ”7/><bry/> 
000000<input name="name" disabled="disabled” value="0DDDDD "><br/> 
<br/> 
D000D<br/> 
<input type="checkbox” name="newsletter" checked="checked" value="test1" />testl 








<input type="checkbox” name="newsletter" value="test2" />test2 
<input type="checkbox” name="newsletter" value="test3" />test3 
<input type="checkbox” name="newsletter" checked="checked" value="test4" />test4 
<input type="checkbox” name="newsletter" values' test5”/>test5 
<div></div> 
<br/><br/> 
加 可 
<select name= "test”multiple="multiple”style="height:100px"> 
<option>0 0 </option> 
<option selected="selected">[] 0 </option> 


0 20 jQuery000 


<option>[0 0 </option> 
<option selected="selected">[0 0 </option> 
<option>0 0 </option> 
<option>[0 0 </option> 
</select> 
<br/><br/> 
000D0 20 <br/> 
<select name="test2"” > 
<option>0 0 </option> 
<option>0 0 </option> 
<option selected="selected">[0 0 </option> 
<option>[0 0 </option> 
<option>0 0 </option> 
<option>0 0 </option> 
</select> 
<div></div> 








</form> 


生成 的 效果 图 如 图 2-4 所 示 。 














可 用 元 素 。| 可 用 文本 框 
不 可 用 元 素 : 江 本 相 
可 用 元 素 : | 可 用 文本 框 
不 可 用 元 素 ， [DEC 


多 选 框 : 


Ytestl test2 test3 testd test5 

























































































































































































下 拉 列 表 2， 
E 京 国 
0240000 
现在 用 jQuery 的 表单 过 小 选择 器 来 操作 它们 ， 示 例如 表 2-20 所 示 。 
表 2-20 表单 对 象 属性 过 滤 示例 
ff 用 人 执 行 后 
可 用 元 素 ， [这 KK7， | 
改变 表单 内 可 用 <input> 元 素 $("#forml input:enabled") 不 可 用 元 素 , ERE | 
的 值 .Val1(" 这 里 变化 了 !"); 可 用 元 素 ， et] 
不 可 用 元 素 , FREE |] 
可 用 元 素 ， 困 用 文本 杠 | 
改变 表单 内 不 可 用 <input> 元 $("#forml input:disabled") 可 用 元 素 ,EEC |] 
素 的 值 .val(" 这 里 变化 了 ! "): 可 用 元 素 ， [PR 办] 
不 可 用 元 素 , [EST | 




















000jaueyv00 200 


作用 全 加 执 行 后 





多 选 杠 ，_ 
testl ji 加 iest2 MItest3 Dtest4 Mtest5 


有 4 个 被 选中 ! 











获取 多 选 框 选中 的 个 数 $("input:checked").1ength: 






































拉 列 表 1: 


湖南 噶 








获取 下 拉 框 选中 的 内 容 $("select :selected").text(): 湖北 性 


下 拉 列 表 2， 
加 
你 选中 的 是 : 北京 ,广州 湖北 ,浙江 ， 

















2.3.4 UD0O0OD0D0 









































为 了 使 用 户 能 够 更 加 灵活 地 操作 表单 ,jQuery 中 专门 加 入 了 表单 选择 器 。 利 用 这 个 选择 器 ， 能 
极其 方便 地 获取 到 表单 的 某 个 或 茶 类 型 的 元 素 。 


表单 选择 器 的 介绍 说 明 如 表 2-21 所 示 。 


















































































































































表 2-21 表单 对 象 属性 过 滤 示 例 

选 择 器 描 述 返 回 示 例 
选取 所 有 的 <input>、<textarea>、 和 $(":input") 选 取 所 有 <input>、<textarea>、 
‘hur <select> 和 <button> 元 素 集合 元 素 <select> 和 <button> 元 素 
:text 选取 所 有 的 单行 文本 框 集合 元 素 $(":text") 选 取 所 有 的 单行 文本 框 
:password 选取 所 有 的 密码 框 集合 元 素 $(":password") 选 取 所 有 的 密码 框 
:radio 选取 所 有 的 单 选 框 集合 元 素 $(":radio") 选 取 所 有 的 单 选 框 
:checkbox 选取 所 有 的 多 选 框 集合 元 素 $(":checkbox") 选 取 所 有 的 复 选 框 
:submit 选取 所 有 的 提交 按 铂 集合 元 素 $(":submit") 选 取 所 有 的 提交 按钮 
:image 选取 所 有 的 图 像 按 包 集合 元 素 $(":image") 选 取 所 有 的 图 像 按钮 
:Teset 选取 所 有 的 重 置 按 名 集合 元 素 $(":reset") 选 取 所 有 的 重 置 按钮 
:button 选取 所 有 的 按钮 集合 元 素 $(":button") 选 取 所 有 的 按钮 
:file 选取 所 有 的 上 传 域 集合 元 素 $(":file") 选 取 所 有 的 上 传 域 
hidden 选取 所 有 不 可 见 元 素 集合 元 素 ed A 
































下 面 把 这 些 表单 选择 器 运用 到 下 面 的 表单 中 ， 对 表单 进行 操作 。 
表单 HTML 代码 如 下 : 


























<form id="forml" action="#"> 
<input type="button” value="Button"/><br/> 





< 


< 





nput 
input 





"hidden” /><di 


analonanean 


020 jQuery000 


"checkbox” name="c"/>1 
"checkbox” name="c"/>2 
"checkbox” name="C"/>3<br/> 
eile /<De/> 


v style="display:none">test</div><br/> 


"image” /><br/> 
"password” /><br/> 


a"/>l<input type="radio" name="a"/>2<br/> 


"reset"” /><br/> 
"submit" value="D 0 "/><br/> 


type="text” /><br/> 


<select><option>0ption</option></select><br/> 


Se 为 
<but 
</form> 





根据 以 上 HTML 代码 ， 可 以 生成 


tarea></textarea><br/> 
ton>Button</button><br/> 





图 2-5 所 示 的 页 面 效 果 。 





























Option 











be 











0 2-5 





000D0 


如 果 想 得 到 表单 内 表单 元 素 的 个 数 ， 代 码 如 下 : 


$("#forml 


:input"). length; 


如 果 想 得 到 表单 内 单行 文本 


$("#forml : 


如 果 想 得 


/O00 $("#forml input 加 回回 








text") .1ength ; 





$("#forml :password").1length: 


他 表单 选择 器 的 操作 与 此 类 似 。 





其 


同 理 ， 





EE 的 个 数 ， 代 码 如 下 : 


到 表单 内 密码 框 的 个 数 ， 代 码 如 下 : 
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50 


寺中 0 洒 4#0 0DDD 


ss 


相同 








在 本 章 开 头 部 分 ， 使 用 传统 的 JavaScript 方法 编写 了 3 个 简单 的 例子 。 
例子 1: 给 网 页 中 所 有 的 <p> 元 素 添 加 onclick 事件 。 

例子 2; 使 一 个 特定 的 表格 隔行 变色 。 

例子 3: 对 多 选 框 进行 操作 ， 输 出 选中 的 多 选 框 的 个 数 。 

下 面 利用 刚 学 会 的 jQuery 选择 器 以 及 隐 式 迭代 的 特性 来 重 写 这 3 个 例子 。 
使 用 jQuery 选择 器 重 写 例子 1， 代 码 如 下 。 






































sO ps ee nner 
//doing something 





用 
使 用 jQuery 选择 器 重 写 例 子 2， 人 代码 如 下 : 





$("#tb tbody tr:even”).css("backgroundColor", "#888"): 

/* 

a elo oll or Io a a oa a alae ol (a) ga (a Oa (NN Na a a a a i a Oa oh a a 
Bnonerty ee valves yey 

2 


使 用 jQuery 选择 器 重 写 例 子 3， 代 码 如 下 : 


$("#btn").click(function(){ 
VAN ey 
var items = $("input[name= check J]:checked"): 
allerto a enslengem 

DD 


很 快 就 改 完 了 ， 仪 仅 使 用 了 儿 个 简单 的 jQuery 选择 器 ， 而 且 它们 的 运行 效果 与 改写 前 是 完全 
的 。 




















0000000000 


221 000000000000000 





I0000000” "0 #00”"0“ O0000 
根据 W3C 的 规定 ， 属 性 值 中 是 不 能 含有 这 些 特殊 字符 的 ， 但 在 实际 项 









































偶尔 会 遇 到 表达 式 

















0 20 jQuery000 














中 含有 “#” 和 “.” 等 特殊 字符 ， 如 果 按 照 普通 的 方式 去 处 理 出 来 的 话 就 会 出 错 。 解 决 此 类 错误 的 
方法 是 使 用 转 义 符 转 义 。 








HTML 代码 如 下 : 


<div id="id#b">bb</div> 
Soy ee jel i oes 


如 果 按 照 普通 的 方式 来 获取 ， 例 如 : 


$("#id#b" ); 
8 














以 上 代码 不 能 正 而 























$("#id\\#b" ):; 
SET 


— 








20000001 








@| 











获取 到 元 素 ， 正确 的 写法 如 下 : 














7 
凡生 


DUD 




















在 jQuery 升级 版 本 过 程 中 ，jQuery 在 1.3.1 版 本 中 彻底 放弃 了 1.1.0 版 本 遗留 下 的 @ 符 号 ， 假 




















如 你 使 用 1.3.1 以 上 的 版 本 ， 那 么 你 不 需要 在 属性 前 添加 @ 符 号 ， 比 如 ; 








$ ”div[Letitle= test ] *]: 


正确 的 写法 是 去 掉 @ 


Ar 口 








侍 3 比 如 2 


$ ”divLtitle= test ] “J: 





注意 : 如 有 果 你 的 项 目 中 已 使 用 较 早 的 jQuery 代码 和 插件 ， 若 把 jQuery 升级 到 最 新 后 ， 出 现代 码 报 
错 或 不 能 运行 ， 那 么 很 有 可 能 是 因为 代码 中 使 用 了 属性 选择 器 的 @ 符 号 而 引起 的 。 








2.52 D0000000000000 





选择 器 中 的 空格 也 是 不 容 忽 视 的 ， 多 一 个 空格 或 少 一 个 空格 也 许 会 得 到 截然 不 同 的 结果 。 
看 下 面 这 个 例子 ， 它 的 HTML 代码 如 下 : 























<div class="test"> 








<div style="display:none:">aa</div> 


<div style="display:none;">bb</div> 


<div style="display:none;">cc</div> 
<div class="test" style="display:none;">dd</div> 


</div> 
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<div class="test" style="display:none;">ee</div> 
<div class="test" style="display:none;">ff</div> 


使 用 如 下 的 jQuery 选择 器 分 别 获取 它们 。 


Wolpev ema = pe tes hn //0000 JQuery000 
val Si 0 = VC ,esimen jo oa 
veralenEan = tealenge 

Vanelenlbe = tengu 





















































alert("$('.test :hidden') = "+len a); wa a 

alert("$(' .test:hidden') = "+len b); Wl 筷 

之 所 以 会 出 现 不 同 的 结果 ， 是 因为 后 代 选 择 器 与 过 小 选择 器 的 不 同 。 
var ve el = WO es san 汪 直 WA Naa 

以 上 代码 是 选取 class 为 “test” 的 元 素 里 面 的 隐藏 元 素 。 

而 代码 : 

var St b= test hidden): we 


则 是 选取 隐藏 的 class 为 “test” 的 元 素 。 


E0000—0000000000 


以 下 是 杀 网 站 上 的 一 个 品牌 列表 的 展示 效果 ,用户 进入 该 页 面 时 , 品牌 列表 默认 是 精简 显示 的 
( 即 不 完整 的 品牌 列表 )， 如 图 2-6 所 示 。 


用 户 可 以 单 击 商品 列表 下 方 的 “显示 全 部 品牌 ”按钮 来 显示 全 部 的 品牌 。 


单 击 “ 显 示 全 部 品牌 ”按钮 的 同时 ， 列 表 会 将 推荐 的 品牌 的 名 字 高 亮 显示 ， 按 钮 里 的 文字 也 换 
成 了 “精简 显示 品牌 ” 如 图 2-7 所 示 。 
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理光 (3538) 与 林 巴 斯 959) 明基 (1567) 
理光 (3680) 奥 林 巴 斯 (10418) 明基 [162s) 三 洋 (1202) 拍 得 丽 (491) 豆 格 逊 / 天 时 
三 洋 (1251) 拍 得 丽 612) 德 之 杰 (4s9)| 广博 (tag) 尼 柯 (266) 德国 旅行 家 
微米 B17) 通用 《GE) (467) 其 他 品牌 相 通用 (GE) (448) 联想 (201) 其 他 品牌 相 
加 显示 全 部 品牌 加 精简 显示 品牌 
0260000000000 027 0000000000 




















再 次 日 击 “精简 显示 品牌 ”按钮 ， 即 又 回 到 图 2-6 所 示 的 页 面 。 


为 了 实现 这 个 例子 ， 首 先 需 要 设计 它 的 HTML 结构 。HTML 代码 如 下 : 








] 















































0 20 jQuery000 
<div class="SubCategoryBox"> 
冯 册 | 
<1i><a href="#">0 0 </a><i>(30440) </i></1i> 
<1i><a href="#">0 0 </a><i>(27220) </i></1i> 
<1i><a href="#">0] 0 </a><i>(20808) </i></1i> 
<1i><a href="#">0 0 </a><i>(17821) </i></1i> 
<1i><a href="#">0 0 </a><i>(12289) </i></1i> 
<1i><a href="#">0 0 0 </a><i>(8242) </i></1i> 
<1i><a href="#">0 0 </a><i>(14894) </i></1i> 
<1i><a href="#">0] 0 </a><i>(9520) </i></1i> 
<1i><a href="#">0 0 </a><i>(2195) </i></1i> 
<1i><a href="#">0 0 </a><i>(4114) </i></1i> 
<1i><a href="#">0 0 0 0 </a><i>(12205) </i></1i> 
<1i><a href="#">0] 0 </a><i>(1466) </i></1i> 
<1i><a href="#">0 0 0 </a><i>(3091) </i></1i> 
<1i><a href="#">0 0 0 0 00 </a><i>(7275) </i></1i> 
</ul> 
<div class="showmore"> 
<a href="more.html"><span>0 0 0 0 0 0 </span></a> 
</div> 
</div> 
然后 为 上 面 的 HTML 代码 添加 CSS 样式 。 上 的 ee 
富士 4894) 柯达 (9520) 宾得 @795) 
页 面 初始 化 的 效果 如 图 2-8 所 示 。 Be 70 生 林 dze0s) HR ese) 
爱国 者 B097) 其 他 品牌 相机 (72?52 
接 下 来 为 这 个 页 面 添加 一 些 交 互 效 果 ， 要 做 已 呈 示 全 部 品牌 
的 工作 有 以 下 几 项 。 028 0000000000 
(1) 从 第 7 条 开始 隐藏 后 面 的 品牌 (最 后 一 条 “其 它 品 牌 相机 ”除外 )。 
《2) 当 用 户 单 击 “ 显 示 全 部 品牌 ”按钮 时 ， 将 执行 以 下 操作 。 











































































































QD 显示 隐藏 的 品牌 。 





@“ 显 示 


全 部 品牌 ”按钮 文本 切换 成 “精简 显示 





@) 高 亮 推 荐 品牌 。 




















(3) 当 用 


QD 从 第 








7 条 玫 



























































口上 内” 






































开始 隐藏 后 面 的 品 











© 








@) 去 掉 高 亮 显示 的 推荐 品牌 。 


站 〈 最 后 一 条 


“精简 显示 品牌 ”按钮 文本 切换 成 “显示 全 部 


甘 








ANOD/F o。 


一 





户 单 击 “ 精 简 显 示 品 牌 ” 按 钮 时 ， 将 执行 以 下 操作 。 





它 品 牌 相机 ”除外 )。 


品牌 ”。 
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下 面 逐步 来 完成 以 | 


(4) 循环 进行 第 (2) 步 和 第 (3) 步 。 





上 的 效果 。 





























(1) 从 第 7 条 开始 隐藏 后 面 的 品牌 〈 最 后 一 条 “其 它 品牌 相机 ”除外 )。 





vapeteategqony HO WonoG east 


$category.hide(): 





wey 























$oul li:gt($):notClasb0) 的 意思 是 先 获 取 <ul> 元 素 下 索引 值 大 于 5 的 xli> 元 素 的 集合 元 素 ， 然 后 去 





























掉 集 合 元 素 中 的 最 后 一 个 元 素 。 这 样 ， 即 可 将 从 第 7 条 开始 至 倒数 第 2 条 的 所 有 品牌 都 获取 到 。 最 














后 通过 hide(0) 方 法 隐藏 这 些 元 素 。 



































(2) 当 用 户 单 也 


ET 


























var $toggleBtn = $('div.show 














“显示 全 部 品牌 ”按钮 时 ， 执 行 以 下 操作 。 


首先 获取 到 按钮 ， 代 码 如 下 : 


Ge > 


Ce ee 


//D O00class0 showmoreD div 


然后 给 按钮 添加 事件 ， 使 


























$toggleBtn.click(function(){ 


$category. show(): 
return false: 


DE 


oe 











] show() 方 法 把 隐藏 的 品牌 列表 显示 出 来 ， 代 码 如 下 : 


/000000 
/000000 


由 于 给 超 链 接 添 加 onclick 事件 ， 因 此 需要 使 用 “return false” 语 名 让 浏览 器 认为 用 户 没 有 单 击 














该 超 链接 ， 从 而 阻止 该 超 链 接 跳 转 。 





| 




















全 


3 




















之 后 ， 需 要 将 “显示 


$bmsoy er na span 





i 部 品 


兽 ” 按 钮 文本 切换 成 “精简 显示 品牌 >”， 代码 如 下 : 


.Css("background", "url(img/up.g9if) no-repeat 0 0") 
ser 0 


这 里 完成 了 两 步 操作 ， 即 把 按钮 的 背景 图 片 换 成 向 上 的 图 片 ， 同 时 也 改变 了 按钮 文本 内 容 , 将 








其 蔡 换 成 “精简 显示 品牌 
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GRA 














接 下 来 需要 高 亮 推荐 品牌 ， 代 码 如 下 : 


CW im) 


te oonans i I econo Te Nomans 


.addClass("promoted"):;; 





使 用 filter0 方 法 筛选 





加 加 
要 求 的 品牌 ， 然 后 为 它们 添加 promoted 样式 。 在 这 里 推荐 了 3 个 











0 20 jQuery000 











品牌 ， 即 佳能 、 尼 康 和 奥 林 巴 斯 。 
此 时 ， 完 成 的 jQuery 代码 如 下 : 


$(function(){ AN OMI 
Vaneeateoory ee wl no lst 











CEA es ela ale 
$category.hide(): GA er 
var $toggleBtn = $('div.showmore > a'); VA 





$toggleBtn.click(function(){ 
category. show(): //D 0 $category 
(this).find('span') 

.Css("background", "url(img/up.gif) no-repeat 0 0") 














sexe 必 上 时 加 加 加 加 加 

Cw I er aeons | eeernst 0 nl 0 reo ns | a 
.addClass("promoted"): ye loa a 

return false; GA 





}) 
)) 
运行 上 面 的 代码 ， 单 击 “ 显 示 全 部 品牌 ”按钮 后 ， 显 示 图 2-9 所 示 的 效果 ， 此 时 已 经 能 够 正常 
显示 全 部 品牌 了 。 
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爱国 者 G097) 其 它 品 牌 相 机 (7275) 
白 精 漳 显示 品牌 











0290000000 





注意 : 上 面 代 码 中 用 到 的 几 个 jQuery 方法 的 意思 如 下 : 

日 show0: 显示 隐藏 的 匹配 元 素 。 

回 css(name,value): 给 元 素 设 置 样式 。 

加 text(string): 设置 所 有 匹配 元 素 的 文本 内 容 。 

加 filter(expD: 筛选 出 与 指定 表达 式 匹 配 的 元 素 集合 ， 其 中 expr 可 以 是 多 个 选择 器 的 组 合 。 
注意 区 分 它 和 find0) 方 法 。find0 〇 会 在 元 素 内 导 找 匹配 元 素 ， 而 filter() 则 是 得 选 元 素 。 一 
个 是 对 它 的 子 集 操作 ， 一 个 是 对 自身 集合 元 素 进行 筛选 。 

昌 addClass(class): 为 匹配 的 元 素 添加 指定 的 类 名 . 









































(3) 当 用 户 单 击 “ 精 简 显 示 品 牌 ”按钮 时 ， 将 执行 以 下 操作 。 


由 于 用 户 单 击 的 是 同一 个 按钮 ， 因 此 事件 仍然 是 在 刚才 的 按钮 元 素 上 。 要 将 切换 两 种 状态 的 效 















































55 


56 





果 在 一 个 按钮 上 进行 ， 可 以 通过 判断 元 素 的 显示 或 者 隐藏 来 达到 目的 ， 代 码 结构 如 下 : 




















(回回 回回 党 
WA 
}elsef{ 
/000D0 ©® 
} 
代码 包 就 是 第 〈2) 步 的 内 容 ， 接 下 来 只 需要 完成 代码 四 的 内 容 即 可 。 





在 jQuery 中 ， 与 show0 方 法 相反 的 是 hide0 方 法 ， 因 此 可 以 使 用 hide0 方 法 将 品牌 隐藏 起 来 ， 
代码 如 下 : 








$category .hide() : //D 0 $category 


3 



































按钮 文本 切换 成 “显示 全 部 品牌 ” 同时 按钮 图 片 换 成 各 下 的 图 片 ， 
4 不 过 是 图 片 路 径 和 文本 内 容 不 同 而 已 ， 代 码 如 下 : 
$lmusy i le san 

.Css("background","url(img/down.gif) no-repeat 0 0") 

:ioe 交加 加 加 加 加 加 和 加 





























然后 将 “精简 显示 品牌 ” 
这 一 步 与 前 面 类 似 ， 吕 

















接 下 来 需要 去 掉 所 有 品牌 的 高 亮 显 示 状 态 ， 此 时 可 以 使 用 removeClass() 方 法 来 完成 ， 代 
人 码 如 下 : 


$('ul 1i').removeClass("promoted"): 加 

















它 将 去 掉 所 有 <li> 元 素 上 的 “promoted” 样 式 ， 即 去 擅 了 品 上 








的 高 亮 状 态 。 








注意 : removeClass(class) 的 功能 和 addClass(class) 的 功能 正好 相反 。addClass(class) 的 功能 是 为 匹配 


月 已 


的 元 素 添 加 指定 的 类 ， 而 removeClass(classS) 则 是 从 匹配 的 元 素 中 删除 指定 的 类 。 





至 此 完成 代码 四。 


三 | 


最 后 通过 判断 元 素 是 否 显示 来 分 别 执行 代码 中 和 代码 包 ， 代 码 如 下 ; 


























if( $category.is(":Visible") ){.} a a ho 
之 后 即 可 将 代码 中 和 代码 @ 插 入 相应 的 位 置 。jQuery 代码 如 下 : 


























if($category.is(":visible")){ Va ell 
$category.hide(): //D 0 $category 
luan sy al soem» 
.css("background", "url(img/down.gif) no-repeat 0 0") 
ex 光大 中 古国 NE 
$('ul 1i').removeClass("promoted"):; 2 


020 jouey000 


}elsef 
$category. show(): //D 0 $category 
TS mim Sem) 
.Css("background", "url(img/up.gif) no-repeat 0 0") 


sie | 加 
stv ie omnes oneanse nl eoneams a addolass( nomoseak 
名 加 医大 三 回回 


} 
至 此 任务 完成 ， 完 整 的 jQuery 代码 如 下 : 


$(function(){ po Ooo 
wvap reategqony HO oo st 和 
序 加 加 ol » 


$category.hide(): A va 
var $toggleBtn = $('div.showmore > a'); Na oa on a a Ng 
$toggleBtn.click(function(){ jy a ao oe We a | 
if($category.is(":visible")){ yea 
$category.hide(): //D 0 $category 


Sams el soar 
.Css("background", "url(img/down.gif)no-repeat 0 0") 


加 国光 GA 
$('ul 1i').removeClass("promoted"); 加 加 本 二 加 加 
}elsef 
$category. show():; //D 0 $category 


SC rm Sem) 
.Css("background", "url(img/up.gif)no-repeat 0 0") 


sexe A 
Sv oi ten omniains a comeaims a onealns( adeGlass( Promobed 
GAN 
} 
return false: Ge] 
}) 
}) 





















































运行 代码 后 ， 单 击 按钮 ， 品 牌 列表 会 在 “全 部 ”和 “精简 ”两 种 效果 之 间 循 环 切换 ， 显 示 效 果 
如 图 2-10 和 图 2-11 所 示 。 























生 能 G0440) 索尼 多 7230) 三 星 Co505) 
尼康 ?8372 松下 (122989) 卡西欧 人 5242》 
其 它 品 牌 相机 (72752 
| 加 显示 全 部 品牌 
D210 0000 
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000jouev00 200 






























































住 能 Goedoy 索尼 &7220) 三 呈 Cososy 
尼康 G7621) 检 下 (323259) 卡西欧 他 3242 
言 士 64592) 树 达 (95207 羡 得 如 9557 
理光 后 74) 二 (12905) 明基 G455》 
爱国 者 S091) 它 品牌 相机 /7225》 
0D21I1 0000 
在 jQuery 中 有 一 个 方法 更 适合 上 面 的 情况 ， 它 能 给 一 个 按钮 添加 一 组 交互 事件 ， 而 不 需要 像 
上 例 一 样 去 判断 ， 上 例 的 代码 如 下 : 
toggleBtn.click(function(){ 
if($category.is(":visible")){ Wa nn 
训 加 加 加 加 00® 
}else{ 
ww 加 00® 
} 


}) 








如 果 改 成 toggle0 方 法 ， 代 码 则 可 以 直接 写成 以 下 形式 : 


$toggleBtn.toggle(function(){ 


几 


当 单 击 按钮 后 ， 脚 本 会 对 代码 @ 和 代码 由 进行 交替 处 理 。 
jQuery 还 提供 了 很 多 简单 易 用 的 方法 ， 上 面 讲解 的 toggle0 方 法 只 是 其 中 的 一 种 ， 


ogg 加 和 本 有 加 可 加 可 本 


加 加 | UD0® 
},function(){ 
2 加 加 加 0 00@ 






































这 些 方法 将 




































































在 后 面 的 草 节 中 进行 讨 


Hp 
AS 


介绍 。 


























SO 


壮 忌 : 


在 本 例 中 ， 如 果 用 户 禁 用 了 JavaScript 的 功能 ， 品 牌 列表 仍然 能 够 完全 显示 ， 当 用 户 单 击 


“显示 全 部 品牌 ”按钮 的 时 候 ， 会 跳 转 到 more.html 页 面 来 显示 品牌 列表 。 作 为 一 名 专业 的 
开发 者 ， 必 须要 考虑 到 禁用 或 者 不 支持 JavaScript 的 浏览 器 (用户 代理 )。 另 外 ， 这 点 对 于 
搜索 引擎 优化 也 特别 有 帮助 ， 毕 竟 当 前 的 搜索 引擎 腿 虫 基本 都 不 支持 JavaScript。 





区 0000D 


2.7.1 
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jQueryyD UD0000000 

















虽然 jQuery 提供 了 许多 实用 的 选择 器 ， 但 还 是 有 可 能 不 能 满足 各 种 多 变 的 业务 需要 ， 不 过 











0 20 jQuery000 





jQuery 选择 器 是 可 以 进一步 扩展 的 。 


10 MoreSelectors for jQuery 








这 是 一 个 jQuery 的 插件 ， 用 于 增加 更 多 的 选择 器 ， 例 如 .color 可 以 匹配 颜色 ，:colIndex 可 以 匹 

















配 表 格 中 的 列 ，:focus 可 以 匹配 获取 焦点 的 元 素 等 。 





插件 地 址 : http://plugins.jquery.com/project/moreSelectors。 
20 Basic XPath 














这 个 插件 可 以 让 用 户 使 用 基本 的 XPath。jQuery 最 开始 支持 XPath 选择 器 ,但 由 于 使 




















人 数 不 















































为 通过 插件 来 实现 。 














插件 地 址 : http://plugins.jquery.com/project/xpath。 





2.72 0000 Sos000000 




















多 ， 且 降低 了 选择 器 匹配 的 效率 ， 因 此 在 1.2 以 后 的 版 本 中 取消 了 默认 对 XPath 选择 器 的 文 持 ， 改 
为 


除了 jQuery 提供 了 强大 的 选择 器 支持 外 ， 也 有 其 他 一 些 JavaScript 脚本 也 提供 了 此 类 纯粹 的 











CSS 选择 器 的 支持 。 


10 document.getE lementsBySelector!() 














早 在 2003 年 ，Simon Willison 就 编写 了 该 脚本 , 它 的 作用 是 通过 选择 嚣 来 获取 文档 元 素 。 读 者 

















可 以 通过 以 下 代码 获取 元 素 。 
document .getElementsBySelector('div#main p a.external') 


该 脚本 最 新 版 本 为 0.4 版 ， 更 新 日 期 为 2003 年 3 月 25 日 。 




















发 布地 址 : http://simonwillison.net/2003/Mar/25/getElementsBySelector/。 
20 cssQuery() 




















这 是 Dean Edwards 编写 的 一 款 利 用 CSS 选择 器 查找 元 素 的 脚本 。 支 持 所 有 CSS1 
以 及 部 分 CSS3 选择 器 ，jQuery 的 选择 器 其 实 是 源 自 于 此 ， 它 文 持 一 些 jQuery 尚 不 文 






































结构 如 下 : 





elements = cssQuery(selector [, from]): 














该 脚本 最 新 版 本 为 2.0.2 版 ， 更 新 日 期 为 2005 年 9 月 10 日 。 


吉方 网 站 : http://dean.edwards.name/my/cssQuery/。 














择 器 ， 例 如 E:link、E:nth-last-child(n)、E:root、E:lang(fr)、E:target 和 E[fool|="bar"] 等 。 


、CSS2 


持 的 先 
语法 
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30 queryS electorAll() 


这 不 是 一 个 脚本 库 ， 而 是 W3C 在 Selectors API 草案 中 提 到 的 方法 ， 该 草案 的 最 新 版 本 是 在 
2007 年 12 月 21 日 发 布 的 。 此 方法 也 是 用 于 实现 通过 CSS 选择 器 来 获取 元 素 的 。 正 8 的 Beta2 中 
已 经 率先 实现 了 此 方法 。 相 信 其 他 几 大 浏览 器 也 很 快 就 能 实现 此 方法 。 

JQuery 的 作者 John Resig 也 表示 将 会 利用 querySelectorAll10 这 个 浏览 器 原生 的 方法 来 重 构 
jQuery 的 选择 器 ， 同 时 增加 一 些 jQuery 扩展 的 选择 器 ， 届 时 jQuery 选择 器 的 执行 效率 也 将 大 大 





















































W3C Selectors API: http://www.w3.org/TR/selectors-api/。 


区 90 


本 草 详 细 讲解 了 jQuery 中 的 各 种 类 型 的 选择 器 。 选 择 器 是 行为 与 文档 内 容 之 间 连 接 的 纽带 ， 
选择 器 的 最 终 目 的 就 是 能 够 轻松 地 找到 文档 中 的 元 素 。 


在 本 章 的 开始 列举 了 3 个 用 传统 JavaScript 方法 写 的 简单 例子 ， 然 后 介绍 了 jQuery 选择 器 ， 并 
用 所 学 的 jQuery 选择 器 以 及 隐 式 迭代 的 特性 将 例子 进行 改写 。 此 外 还 讲解 了 选择 器 中 的 一 些 注意 
事项 ， 和 希望 能 引起 初学 者 的 注意 。 最 后 以 某 网 站 上 一 个 品牌 列表 作为 例子 ， 加 深 读者 对 jQuery 选 
择 器 用 法 的 理解 。 
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DOM 是 Document Object Model 的 缩写 ， 意 思 是 文档 对 象 模型 。 根 据 W3C DOM 规范 
Chttp:Wwww.w3.org&IDOM)，DOM 是 一 种 与 浏览 器 、 平 台 、 语 言 无 关 的 接口 ， 使 用 该 接口 可 以 轻松 
地 访问 页 面 中 所 有 的 标准 组 件 。 简 单 来 说 ，DOM 解决 了 Netscape 的 JavaScript 和 Microsoft 的 JScript 
之 间 的 冲突 ， 给 予 了 Web 设计 师 和 开发 者 一 套 标准 的 方法 ， 让 他 们 能 够 轻松 获取 和 操作 网 页 中 的 
数据 、 脚 本 和 表现 层 对 象 。 


VS? Rood 


一 般 来 说 ，DOM 操作 分 为 3 个 方面 ， 即 DOM Core (核心 )、HTML-DOM 和 CSS-DOM。 
























































10 DOM Core 





DOM Core 并 不 专属 于 JavaScript， 任 何 一 种 支持 DOM 的 程序 设计 语言 都 可 以 使 用 它 。 它 的 用 
途 并 非 仅 限于 处 理 网 页 ， 也 可 以 用 来 处 理 任 何 一 种 使 用 标记 语言 编写 出 来 的 文档 ， 例 如 XML。 





















































JavaScript 中 的 getElmentById()、getElementsByTagName()、getAttributeO 〇 和 setAttribute() 等 方 
法 ， 这 些 都 是 DOM Core 的 组 成 部 分 。 


例如 : 
日 ”使 用 DOM Core 来 获取 表单 对 象 的 方法 : 





document .getElementSsByTagName("form”) ; 
加 ”使 用 DOM Core 来 获取 某 元 素 的 Src 属性 的 方法 : 
element .getAttribute("Src") ; 


20 HTML- DO M 














在 使 用 JavaScript 和 DOM 为 HTML 文件 编写 脚本 时 ， 有 许多 专属 于 HIML-DOM 的 属性 。 
HTML-DOM 的 出 现 甚至 比 DOM Core 还 要 早 ， 它 提供 了 一 些 更 简明 的 记号 来 描述 各 种 HTML 元 
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例如 : 

日 ”使 用 HTML-DOM 来 获取 表单 对 象 的 方法 : 
document .forms //HIML-DOMOD D000 forms00 

日” 使 用 HTML-DOM 来 获取 某 元 素 的 src 属性 的 方法 : 
ellemenmesne: 


通过 上 面 所 说 的 方法 ， 可 以 发 现 获 取 某 些 对 象 、 属 性 既 可 以 
用 HTML-DOM 实现 。 相 比较 而 言 HTML-DOM 的 代码 通常 比较 简 
文档 。 






































30 C99- DOM 


CSS-DOM 是 针对 CSS 的 操作 。 在 JavaScript 中 ，CSS-DOM 技术 的 主要 作用 是 获取 和 设置 





j DOM Core 来 实现 ， 也 可 以 使 








短 ， 不 过 它 只 能 用 来 处 理 Web 





















































style 对 象 的 各 种 属性 。 通 过 改变 style 对 象 的 各 种 属性 ， 可 以 使 网 页 呈现 出 各 种 不 同 的 效果 。 








例如 : 设置 某 元 素 style 对 象 字体 颜色 的 方法 : 


element .style.color = "red": 














jQuery 作为 JavaScript 库 ， 继 承 并 发 扬 了 JavaScript 对 DOM 对 象 的 操作 的 特性 ， 使 开发 人 员 
能 方便 地 操作 DOM 对 象 。 下 面 详细 介绍 jQuery 中 的 各 种 DOM 操作 。 
































2 淡 僚 和 0 [太太 咒 口 











为 了 能 全 面 地 讲解 DOM 操作 ， 首 先 需 要 构建 一 个 网 页 。 因 为 每 一 张 网 页 都 能 用 DOM 表示 出 


























来 ， 而 每 一 份 DOM 都 可 以 看 作 一 棵 DOM 树 。 构 建 的 网 页 效果 如 图 3-1 所 示 。 


HTML 代码 如 下 : 


#0 加 
olele= 人 和 加 加 加 加 加 加 
<U]> 
< ea NA 
过 [ET OY <A 
<Immeit hea ON Sa/ 
eM 


//:-000000 
根据 上 面 的 网 页 结构 构建 出 一 棵 DOM 树 ， 如 图 3-2 所 示 。 
接 下 来 ， 对 DOM 的 各 种 操作 都 将 围绕 这 棵 DOM 树 而 展开 。 















































0 30 jQuery00O DOMDOD 


dom - Mozilla Fir TiE 区 到 


| 四 编 缉 (E) 一 看 (W) 历史 (8S) 书 答 (8) 工具 () 


提 - 写 -多 四 本 本 这 俐 [ 








你 最 喜欢 的 水 果 是 ? 








0 3-2 DOMODO 


3:2;1 由 加 加 加 





使 用 jQuery 在 文档 树 上 查找 节点 非常 容易 ， 可 以 通过 在 第 2 章 介 绍 的 jQuery 选择 器 来 完成 。 
1l0000000 
获取 元 素 节 点 并 打印 出 它 的 文本 内 容 ，jQuery 代码 如 下 : 











vane pl = sie J 所 机 同 加 | 2 Wi 
var 1i txt = $1i.text(); A 0 
alert(1i txt); 见面 罩 加 加 加 加 























以 上 代码 获取 了 <ul> 元 素 里 第 2 个 xli> 节 点 ， 并 将 它 的 文本 内 容 “ 橘 子 ” 打 印 出 来 ， 效 果 如 
3-3 所 示 。 


20000000 








利用 jQuery 选择 器 查找 到 需要 的 元 素 之 后 ， 就 可 以 使 用 attr0 方 法 来 获取 它 的 各 种 属性 的 
值 。attr0 方 法 的 参数 可 以 是 一 个 , 也 可 以 是 两 个 。 当 参数 是 一 个 时 ， 则 是 要 查询 的 属性 的 名 字 ， 
例如 : 











获取 属性 节点 并 打印 出 它 的 文本 内 容 ，jQuery 代码 如 下 : 





var $para = $("p"); //D 0 <p>0 0 
var Pat onaranmeGene ele NE 2 < while 
alert(p txt): Ve 





以 上 代码 获取 了 <p> 节 点 ， 并 将 它 的 title 属性 的 值 打印 出 来 ， 效 果 如 图 3-4 所 示 。 





000jouery00 200 








你 最 喜欢 的 水 果 是 ? 





























033 000000 034000000 


3:2:2 加 四 四 加 
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从 第 3.2.1 小 节 可 知 ， 用 jQuery 选择 器 能 够 快捷 而 轻松 地 查找 到 文档 中 的 某 个 特定 的 元 素 贡 
点 ， 然 后 可 以 用 attr0 方 法 来 获取 元 素 的 各 种 属性 的 值 。 


真正 的 DOM 操作 并 非 这 么 简单 。 在 DOM 操作 中 ， 常 常 需要 动态 创建 HTML 内 容 ， 使 文档 在 
浏览 器 里 的 呈现 效果 发 生变 化 ， 并 且 达 到 各 种 各 样 的 人 机 交互 的 目的 。 


10000000 


例如 要 创建 两 个 <li> 元 素 节 点 ， 并 且 要 把 它们 作为 <ul> 元 素 节 点 的 子 节 点 添加 到 DOM 节点 树 
上 。 完 成 这 个 任务 需要 两 个 步骤 。 


(1) 创建 两 个 <li> 新 元 素 。 

(2) 将 这 两 个 新 元 素 插 入 文档 中 。 
第 (1) 个 步骤 可 以 使 用 jQuery 的 工厂 函数 $0 来 完成 ， 格 式 如 下 : 
$mGmle 


$(html) 方 法 会 根据 传 入 的 HTML 标记 字符 串 , 创建 一 个 DOM 对 象 ,并 将 这 个 DOM 对 象 包装 
成 一 个 jQuery 对 象 后 返回 。 


首先 创建 两 个 <li> 元 素 ，jQuery 代码 如 下 : 


































































































ve oT 
var $1i 2 = $("<1i></1i>"): /000 20<li>00 


然后 将 这 两 个 新 元 素 插 入 文档 中 ， 可 以 使 用 jQuery 中 的 append0) 等 方法 〈 将 在 第 3.2.3 小 节 进 


行 介绍 )。 


jQuery 代码 如 下 : 








64 


su appendep ls 
su NapDeneb la 


D030 jQuery00 DOMDOO 


A 
oa os wy alae aloel CS 





:十 二 


壮 忆 : 
档 中 。 


(1) 动态 创建 的 新 元 素 节点 不 会 被 自动 添加 到 文档 中 ， 而 是 需要 使 用 其 他 方法 将 其 插入 文 


(2) 当 创建 单个 元 素 时 ， 要 注意 闭合 标签 和 使 用 标准 的 XHTML 格式 。 
例如 创建 一 个 <p> 元 素 ， 可 以 用 $("<p/>") 或 者 $("<p></p>")， 但 不 要 使 用 $("<p>") 或 者 大 写 的 


Sp 




















运行 代码 后 ， 新 创建 的 <li> 元 素 将 被 添加 到 网 页 中 





所 以 只 能 看 到 sli> 元 素 默认 的 “。 ”如 图 3-5 











2000001 

















已 经 创建 了 两 个 xli> 元 素 节 点 并 和 














的 元 素 节 点 添加 文本 内 容 。 


jQuery 代码 如 下 : 
vaneolnee 


Wa 2 


$("ul").append($ 
$("ul").append($ 


如 以 上 代码 所 示 ， 创 建文 本 节点 就 是 在 创建 元 素 节 点 时 直 
门 添 加 到 文档 中 就 可 以 了 。 





append0 等 方法 将 它 








Te 
WE 


ve 


B00 /1 

















巴 它 们 插入 文档 中 








所 示 。 


























， 因 为 暂时 没有 在 它们 内 部 添加 任何 文本 ， 
你 最 喜欢 的 水 果 是 ? 
。 蔷 果 
。 橘 子 
:区 
Ph 了。 此 时 需要 为 创建 : 
035 000000 





网 加 节 生 | 


Wn 


[a 


加 加 辐 加 回 志 呈 和 轩 加 加 加 加 


py 
/000 <ui 
多 加 四 四 有 


加 加 
i 
OOOOOOOOO 















































接 把 文本 内 容 写 出 来 ， 然 后 使 用 























创建 的 <1i> 节 点 显示 到 网 页 中 的 效果 如 图 3-6 所 示 。 
注意 : 无 论 $(htm]) 中 的 HTML 代码 多 么 复杂 ， 都 可 以 使 用 相同 的 方式 来 创建 。 


例如 $("<li><em> 这 是 </em><b> 一 个 </b><a href=' 大 > 复杂 的 组 合 </a> </1i>"); 





30000000 








创建 属性 节点 与 创建 文本 节点 类 似 ， 也 是 直接 在 创建 元 素 节 点 时 一 起 创建 。jQuery 代码 如 下 : 








var $1i 1 


Va ST 2 














= SC 


tle='0 0 '>0 0 </1i>"); 





= SC 


le A 


aN ON < 
认 加 恒生 加 轩 加 加 罗 加 加 轩 加 加 加 
jw 
pA ON < 
/00000 


击 I a 




















加 
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000jQauey00 200 


风 帮 攻关 强人 生 加 下 el 
$C"'Ul").append($1i 1); 
$("Ul").append($1i 2); 


es Eee 
运行 代码 后 ， 效 果 如 图 3-7 所 示 。 
































你 最 喜欢 的 水 果 是 ? 你 最 喜欢 的 水 果 是 ? 
。 芋 果 。 芋 果 
。 椰子 。 椰子 
。 菠 区 。 菠 区 
。 理 贡 。 理 贡 
03.6 000000 03.7 000000 
读者 也 许 会 发 现 图 3-7 与 





图 3-6 显示 的 效果 没有 什么 














文 别 ， 但 事实 上 两 者 还 是 有 差别 的 ， 可 以 
通过 Firebug 工具 来 查看 比较 。 























注意 : Firebug 工具 是 FireFox 浏览 器 的 一 个 插件 ， 它 不 仅 能 





















































查看 网 页 的 文档 结构 ， 还 能 查看 CSS、 
JavaScript 等 ， 是 开发 者 必 不 可 少 的 工具 之 一 。 具 体 介 绍 见 附录 Firebug。 
图 3-6 的 网 页 内 容 在 Firebug 工具 下 显示 的 效果 如 图 3-8 所 示 。 
3-7 的 网 页 内 容 在 Firebug 工具 下 显示 的 效果 如 图 3-9 所 示 。 
询 百 看 编 纺 1p< body < html 褒 囊 看 编辑 1 ul < body < html 
控制 站 HTML C55 基本” DOM 网络 Ysiow 控制 会 | HTML CSS 旧 木 DOM 网 络 Ysiow 
让 cr + 了 
el 《body》 中 《body 
好 title= “这 条 作 展 痰 区 的 水 时.“> 你 好 间 欢 的 水 果 总 ?<ADp》 《Dp t1t1e= “这 水 你 昌 襄 区 的 水 寻 “》> 你 县 亮 区 的 水 轩 总 ?7p> 
国 “ul> 四 cn1y 
<11 tit1e=" 革 男 “> 革 时 </117 <1i title-" 重 困 "》 备 困 </1iy 
<11 tit1e=“ 钙 子 "> 锌 子 </117 《1i title= “橘子 "> 权 子 /Li> 
xli title=“ 疲 字 “> 禾 轩 </1i> 《1i title=" 奢 六 "> 庚 男 </1i>》 
<1i> 普 荡 <71i> 《li title=" 首 范 "》 首 艺 </1i》 
<1i7 者 诬 </1i> Xli title=" 雪 各 和 > 雪梨 </1i> 
dul) Sal> 
cfbodr /podr> 
fhtal> /ntnl> 
038 00000000000 03-9 DO00000titlieg000 
通过 比较 图 3-8 和 




















图 3-9 对 应 的 代码 ， 发 现 图 3-9 的 代码 中 最 后 两 个 <li> 元 素 多 了 名 为 “tile” 
由 此 可 以 判断 ， 创 建 的 元 素 的 文本 节点 和 属性 节点 都 已 经 添加 到 网 页 中 了 。 


由 此 可 见 用 jQuery 来 动态 创建 HTML 元 素 是 非常 简单 、 方 便 和 灵活 的 。 


的 属性 节点 。 


























32.3 局 山 思 曙 





动态 创建 HTML 元 素 并 没有 实际 用 处 ， 还 需要 将 新 创建 的 元 素 插入 文档 中 
插入 文档 最 简单 的 办 法 是 ， 让 它 成 为 这 个 文档 的 某 个 节点 的 子 节点 。 前 面 使 




















PF。 将 新 创建 的 节点 
用 了 一 个 插入 节点 的 方 





利明 














法 append0， 它 会 在 元 素 内 部 奶 加 新 创建 的 内 容 。 


将 新 创建 的 节点 扣 








入 某 个 文档 的 方法 并 非 上 只 有 
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种 ， 在 jQuery 中 还 提供 了 其 他 几 种 插入 节点 














































































































的 方法 ， 如 表 3-1 所 示 。 读 者 可 以 根据 实际 需求 灵活 地 做 出 多 种 选择 。 
表 3-1 插入 节点 的 方法 
ge 流 描 述 示 例 
HTML 代码 : 
<p>0 0 0 : </p> 
pendl 向 每 个 匹配 的 元 素 内 部 追加 内 容 jy fs: 
$("p").append("<b>0 0 </b>"): 
结果 : 
<p>000: <b>0 0 </b></p> 
HTML 代码 : 
将 所 有 匹配 的 元 素 追 加 到 指定 的 元 素 中 。 <p>00D0 : </p> 
6 实际 上 ， 使 用 该 方法 是 颠倒 了 常规 的 jQuery 代码 : 
PP $(A).append(B) 的 操作 ， 即 不 是 将 B 追加 到 | $("<b>0 0 </b>").appendTo("p"); 
A 中 ， 而 是 将 A 追加 到 了 B 中 结果 : 
二 口 和 
<p>z0DD : <b>0 0 </b></p> 
HTML 代码 : 
<p>0D 0 0 : </p> 
pe 向 每 个 匹配 的 元 素 内 部 前 置 内 容 J 
$("p").prepend("<b>0 0 </b>"): 
结果 : 
<p><b>0 0 </b>0 D0 : </p> 
HTML 代码 : 
将 所 有 匹配 的 元 素 前 置 到 指定 的 元 素 中 。 <pz00D0 : </p> 
rependTog 实际 上 ， 使 用 该 方法 是 颠倒 了 常规 的 jQuery 代码 : 
PreP $(A).prepend(B) 的 操作 , 即 不 是 将 B 前 置 到 | $0 "<b>0 0 </b>").prependTo("p"): 
A 中 ， 而 是 将 A 前 置 到 B 中 结果 : 
二 口 > 
<p><b>0 0 </b>0 D0 : </p> 
HTML 代码 : 
<p>0 0 0 : </p> 
afier0 在 每 个 匹配 的 元 素 之 后 插入 内 容 oe 
$("p").after("<b>0 0 </b>"):; 
结果 : 
<p>0 D0 : </p><b>0 0 </b> 
HTML 代码 : 
将 所 有 匹配 的 元 素 插 入 到 指定 元 素 的 后 “POOD: </p> 
ert A 面 。 实 际 上 ， 使 用 该 方法 是 颠倒 了 常规 的 ”| jQuery 代码 : 
$(A).after(B) 的 操作 ， 即 不 是 将 B 插 入 到 A | $("<b>0 0 </b>").insertAfter("p"); 
后 面 ， 而 是 将 A 插入 到 B 后 面 结果 : 
<p>0 D0 : </p><b>0 0 </b> 
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疝 法 描 述 示 例 

HTML 代码 : 
<p>0D 0 0 : </p> 

before() 在 每 个 匹配 的 元 素 之 前 插入 内 容 。 jQuery 代码 : 
$("p").before("<b>0 0 </b>"):; 
结果 : 
<b>0 0 </b><p>0 0 0 : </p> 
HTML 代码 : 




















insertBefore() 








A 前 面 ， 而 是 将 A 插入 到 B 前 面 








将 所 有 匹配 的 元 素 插入 到 指定 的 元 素 的 前 | “PU DD ;</p> 
面 。 实 际 上 ， 使 用 该 方法 是 颠倒 了 常规 的 “| jQuery 代码 ; 
SCA)before(B) 的 操作 ， 即 不 是 将 B 插入 到 | $("<b>0 0 </b>").insertBefore("p"); 


结果 : 
<b>0 0 </b><p>0 D0 : </p> 








这 些 插入 节点 的 方法 不 仅 能 将 新 创建 的 DOM 元 素 插入 到 文档 中 ， 也 能 对 原 有 的 DOM 元 素 进 


行 移 动 。 























例如 利用 它们 创建 新 元 素 并 对 其 进行 插入 操作 。 











jQuery 代码 如 下 : 


Va oe 和 这 
Va i en 
Va oe ne 硬 条 攻 和 辣 让 这 








var $parent = $("ul"); 

van povonlne He wn eo 0 
parent .append($1i 1); 

parent .prepend($1i 2); 
SEE GO 





运行 代码 后 ， 网 页 呈现 效果 如 图 3-10 所 示 。 






































jQuery 代码 如 下 : 


valesoneal i ee ve 
Vee Sewonml i = wl 
$two_1i.insertBefore( $one_1i); 


多 加 加 下 4 <0 
20 < 
0 











CA 

CAT 冯 本 可 本 WE 加 

Wappengd 国 人 
Vo SPE NT 
VS EA TLS] 
Os 








网 如 利用 它们 对 原 有 的 DOM 元 素 进行 移动 。 


思 加 加 本 RS 汪 
加 二 加 加 加 2 四 加 加 轩 
1 加重 间 | 








0 30 jauerv00 DoM0D 





运行 代码 后 ， 网 页 呈现 效果 如 图 3-12 所 示 。 









































你 最 喜欢 的 水 果 是 ? 
“二 你 最 喜欢 的 水 果 是 ? 你 最 喜欢 的 水 果 是 ? 
。 橘 子 六 
和 。 苹果 。 苹 果 
Se 。 橘 子 。 菠 区 
。 理 车 。 菠萝 。 橘 子 
03-10 0000 03-11 0000 03-12 0000 
3.2.4 0D000 

















如 果 文 档 中 某 一 个 元 素 多 余 ， 那 么 应 将 其 删除 。jQuery 提供 了 三 种 删除 节点 的 方法 ， 即 
remove(O，detachO0 和 empty()。 








10 removel() 癌 口 
作用 是 从 DOM 中 删除 所 有 匹配 的 元 素 ， 传 入 的 参数 用 于 根据 jQuery 表达 式 来 科 选 元 素 。 








例如 删除 图 3-11 中 <ul> 节 点 中 的 第 2 个 <li> 元 素 节 点 ，jQuery 代码 如 下 : 








$("Ul 1i:eq(1)") remove(): N00020<i>00000000000000 
运行 代码 后 效果 如 图 3-13 所 示 。 


当 某 个 节点 用 remove0 方 法 删除 后 ， 该 节点 所 包含 的 所 有 后 代 节 点 将 同时 被 删除 。 这 个 方法 的 
返回 值 是 一 个 指向 已 被 删除 的 节点 的 引用 ， 因 此 可 以 在 以 后 再 使 用 这 些 元 素 。 下 面 的 jQuery 代码 
说 明 元 素 用 remove() 方 法 删除 后 ， 还 是 可 以 继续 使 用 的 。 






















































































五 














var $1i = $("ul li:eq(1)").remove(); //0 O00 20<1300000000000000 
$1i.appendTo( ul ) ECE Ss 


可 以 直接 使 用 appendTo0 方 法 的 特性 来 简化 以 上 代码 ，jQuery 代码 如 下 : 





$("ul li:eq(1)").appendlo( "ul"); 
//appendtir oD0 D0000000000 
四 和 0 


























尔 最 过 欢 的 三 
你 最 喜欢 的 水 果 是 ? 你 最 喜欢 的 水 果 是 ? 
。 苹 果 
:下 。 流 莫 
a “梳子 
器 33 人 0 日 且 0 03-14 D00000 jQuery00000 


男 外 remove0 方 法 也 可 以 通过 传递 参数 来 选择 性 地 删除 元 素 ，jQuery 代码 如 下 : 





70 


0U00Ujouery00 200 


SO removeke ee 


加 





运行 代码 后 ， 效 果 如 图 3-15 所 示 。 




















在 Firebug 工具 中 查看 源 代码 ， 如 图 3-16 所 示 。 











你 最 喜欢 的 水 果 是 ? 
。 菠 欧 
03-15 000000000 











20 detach()D 





detach() 和 remove() 一 样 ， 也 是 从 DOM 中 去 掉 所 有 史 丁 





识 二 圭 编 强 1 body - html 
控制 和合 HTML C55 舌 本 DOM 网 络 YSlow 





-== 


《p title=" 选 么 你 展 训 区 的 水 果 .“》 你 虹 喜 区 的 水 时 号 ? <yp> 


ful> 





<li title=“ 蔬 欧 "> 蔬 殴 《Al1i> 











0316 0000000 

















的 元 素 。 但 需要 注意 的 是 ， 这 个 方法 





























不 会 把 匹配 的 元 素 从 jQuery 对 象 中 删除 ， 因 而 可 以 在 将 来 再 使 用 这 些 匹配 的 元 素 。 与 remove() 不 








同 的 是 ， 所 有 绑 定 的 事件 、 附 加 的 数据 等 都 会 保留 下 来 。 














通过 下 面 的 例子 ， 可 以 知道 它 与 remove0 方 法 的 区 别 ，jQuery 代码 如 下 : 


So ee fue eo 
alert( $(this).html() ): 
D>) 


Va ln = ed detaen /Nal 
ee emover ol 


$1i.appendTo("ul"):; 
加 


30 empty00 0 








严格 来 讲 ，empty0 方 法 并 不 是 删除 节点 ， 而 是 清空 节点 ， 它 能 清空 元 素 中 的 所 有 后 代 节 点 。 


jQuery 代码 如 下 : 


$("ul 1i:eq(1)").empty():; 





训 硬 加 面 译 加 < 加 和 加 加 硬 轩 硬 夺 加 硬 加 加 轩 加 加 夺 和 











当 运 行 代码 后 , 第 2 个 <li> 元 素 的 内 容 被 清空 了 ,只 剩 下 <li> 标 签 默 认 的 符 
号 4 。 7 效果 如 图 3-17 所 示 。 




















在 Firebug 工具 中 查看 源 代码 ， 如 图 3-18 所 示 。 



































褒 ” 引 看 编 邵 11i<ul=body = html 
控制 辣 | HTML | <SS 基本 DOM “网络 YSow 











Eee | 


由 《head> 
四 《bodz> 
《Dp title= 迁 么 你 展 训 欢 的 水 对 “> 你 姑 嘉 欢 的 水 果 号 ?< > 
日 <al> 
《li title=" 革 果 "> 革 果 <Pi> 
<1li title=“ 栖 子 “/> 
《li title=" 旋 万 ”> 项 本 <f1i> 
<ful> 
<fbodr> 
<zhtal> 








3.25 00OD00 


复制 节点 也 是 常用 的 DOM 操作 之 一 ， 例 如 图 3-19 所 示 的 某 个 购物 网 站 的 效果 ， 用 户 不 仅 可 
以 通过 单 击 商品 下 方 的 “选择 ”按钮 购买 相应 的 产品 ， 也 可 以 通过 鼠标 拖 动 商品 并 将 其 放 到 购物 车 
中 。 这 个 商品 拖 动 功能 就 是 用 的 复制 节点 ， 将 用 户 选择 的 商品 所 处 的 节点 元 素 复 制 一 次 ， 并 将 其 跟 
随 鼠 标 移动 ， 从 而 达到 以 下 购物 效果 。 





03-18 0000000 
























































继续 治 用 之 前 的 例子 ， 如 果 单 击 <li> 元 素 后 需要 再 复制 一 个 <li> 元 素 


完成 ，jQuery 代码 如 下 : 


SI ee hve eon 











， 可 以 使 月 











Se nselone rena 




















在 页 面 中 单 击 “ 菠 蔓 ” 后 ， 








列表 最 下 方 出 现 新 节点 “ 菠 蔓 ”， 效 果 如 











基 届 村 


价格 : 了 


.35 元 














0319 00000000000 











单 击 事件 )， 可 以 使 用 如 下 jQuery 代码 : 


$(this).clone(true).appendTo("body"); /DODDD true 





在 clone0 方 法 中 传递 了 一 个 参数 rue， 它 的 含义 是 复制 元 素 的 同时 复制 元 素 中 所 绑 定 的 事 们 





因此 该 元 素 的 副本 也 同样 具有 复 








图 3-20 所 示 。 














0320 0000 


复制 节点 后 ， 被 复制 的 新 元 素 并 不 具有 任何 行为 。 如 果 需 要 新 元 素 也 具有 复制 功能 〈 本 例 中 是 














制 功能 〈 本 例 中 是 单 击 事件 )。 











日 cloneO) 方 法 来 


下 





0 30 jQuery00O DOMDOD 
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3.2.6 00D000 














如 果 要 替换 某 个 节点 ，jQuery 提供 了 相应 的 方法 ， 即 replaceWithO0 和 replaceAllO。 





























replaceWith() 方 法 的 作用 是 将 所 有 匹配 的 元 素 都 替换 成 指定 的 HTML 或 者 DOM 元 素 。 例 如 要 
将 网 页 中 “<p title=" 选 择 你 最 喜欢 的 水 果 ."> 你 最 喜欢 的 水 果 是 ?</p>” 替 换 成 “<strong> 你 最 不 喜欢 
的 水 果 是 ? </strong>” 可 以 使 用 如 下 jQuery 代码 : 








("p").replaceWith("<strong>0 0 O000000?</strong>"): 




















也 可 以 使 用 jQuery 中 另 一 个 方法 replaceAll0 来 实现 ， 该 方法 与 replaceWith() 方 法 的 作用 相同 ， 
只 是 颠倒 了 replaceWith() 操 作 ， 可 以 使 用 如 下 jQuery 代码 实现 同样 的 功能 : 





(<strongz00D0O0ODOD0D0DD?</strong>").replaceAl1("p”): 


这 两 句 jQuery 代码 都 会 实现 图 3-21 所 示 的 效果 。 





你 最 不 喜欢 的 水 果 是 ? 











03 2 0000 





注意 : 如 果 在 替换 之 前 ， 已 经 为 元 素 绑 定 事件 ， 替 换 后 原先 绑 定 的 事件 将 会 与 被 替换 的 元 素 一 起 
消失 ， 需 要 在 新 元 素 上 重新 绑 定 事 件 。 





3.2.7 加 四 站 各 




















hn 


如 果 要 将 某 个 节点 用 其 他 标记 包 于 起 来 ,jQuery 提供 了 相应 的 方法 ， 即 wrap0 。 该 方法 对 了 
要 在 文档 中 插入 额外 的 结构 化 标记 非常 有 用 ， 而 且 它 不 会 破坏 原始 文档 的 语义 。 


jQuery 代码 如 下 : 



































TO Snonog Wa D/A A sstronogo nd 
得 到 的 结果 如 下 : 





Sb SO lS os 
在 Firebug 工具 中 查看 源 文件 ， 效 果 如 图 3-22 所 示 。 


















































包 于 节点 操作 还 有 其 他 两 个 方法 ， 即 wrapAll0 和 wrapInner()。 








和 [| 桨 晤 body < html 


控制 冶 HTML | SS 层 本 DOM 网 络 YsSlow 
ne 
国 <head> 
BB bodr> 
四 <b> 
《strong tit1le=" 选 和 你 最 训 欢 的 水 困 .“> 你 她 熹 欢 的 水 果 总 ? <7stronE> 





<zrb> 
Bul> 
《li title=“ 苹 困 "> 苹 困 </1i> 
<li title=“ 桶 子 "> 桶 子 <A1i> 
《li title=" 北 复 "> 蕊 宴 </1i> 
/ul> 
<fbodr> 
<fhtml> 











03:22 0000000 
10 wrapAll() 口 口 


该 方法 会 将 所 有 匹配 的 元 素 用 一 个 元 素来 包 时 。 它 不 同 于 wrap0 方 法 ，wrap0 方 法 是 将 所 有 的 
元 素 进行 单独 的 包 囊 。 


为 了 使 效果 更 突出 ， 在 网 页 中 再 加 入 一 个 <strong> 元 素 。 
HTML 代码 如 下 : 




































































SwROngm le sa LAs ng 
Soong le Nal lalla A enong 

















<ul> 
<li title='0 0 '>0 0 </1i> 
< le Ai 
<1i title='0 0 ‘30 0 </1i> 
SAU 
如 果 使 用 wrap() 方 法 包 右 <strong> 元 素 ，jQuery 代码 如 下 : 





BOS on Wa/ 
将 会 得 到 如 下 结果 : 


b> Songn ee sno 
ES 


用 Firebug 工具 查看 源 文件 的 效果 如 图 3-23 所 示 。 



































使 用 wrapAll0 方 法 包 里 <strong> 元 素 ，jQuery 代码 如 下 : 
BSG on Wao A b>/ > 
则 会 得 到 如 下 结果 : 


<b> 


SS iles To ne 
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SENOng ee son 
</b> 





守 生 看 编 强 15strong < b < body< html 
了 | 辣 ”HTML CSS 脚本 DOM 网络 YSlow 


由 《head> 

BB odr> 
局 “by> 

《strone title=“ 选 称 你 野 喜 欢 的 水 里“》 你 县 喜欢 的 水 果品? 《istrone> 

xf) 

b> 








<strong title-“ 选 繁 你 展 训 让 的 水 困 .“>》 你 好 训 让 的 水 困 是 9 </strcngy> 


/b> 
9 ‘ul> 
《li title=" 革 果 "》 革 用 C1i> 


《li title= 区 于 "> 栖 于 </11> 
《<li title 闸 拿 "、》 茹 全 </1i> 
ul> 
《fbodr> 
fhtal> 


03 2 0 wapdj0O00U0O00U0DO 



































用 Firebug 工具 查看 源 文件 的 效果 如 图 3-24 所 示 。 





注意 : 如 果 被 包 衷 的 多 个 元 素 间 有 其 它 元 素 ， 其 它 元 素 会 被 放 到 包 囊 元素 之 后 。 





20 wraplnner()0 口 


该 方法 将 每 一 个 匹配 的 元 素 的 子 内容 〈 包 括 文本 节点 ) 月 
以 使 用 它 来 包 右 <strong> 标 签 的 子 内 容 ，jQuery 代码 如 下 : 











日 其 他 结构 化 的 标记 包 囊 起 来 。 例 如 可 

















$("strong").wrapInner("<b></b>"); 
运行 代码 后 ， 发 现 <strong> 标 签 内 的 内 容 被 一 对 <b> 标 签 包 于 了 ， 结 果 如 下 : 


证 





<strong title=" 吕 日 上 O00OOODO. 
[ 具 查 看 网 页 结构 ， 显 示 效 果 如 图 3-25 所 示 。 














使 用 Firebug 了 












































-下 编组 1 strong < b = body = html 认可 看 编辑 1li=<ul< body = html 
控 抽 全 | HTML | <55 局 本 DOM ”网 络 ”Yslow 控制 辣 | HTML | CSS 肢 本 ”DOM 网络 ”Yslow 
= == | 
<head> 国 <head> 
B <bodr> 四 <bodr> 
日 《b> 日 《st title=" 选 生 你 最 襄 欢 的 水 困 . “> 
《stromE title=" 选 和 你 最 亮 允 的 水 困 . “> 你 最 亮 欢 的 水 困 是 ? </ strone》 “< 作 展 刘欢 的 水 果 是 ?</by 
<strong title=“ 选 徐 剑 象 多 欢 的 水 困 .“> 剑 好 吕 欢 的 水 困 丰 ? 《strone》 5 
py 
2 Ws 芋 果 "> 草 黑 </ 
Es wi <1i title-“ 芝 困 "> 苹 困 </1i》 
党 i <l1i title=" 权 子 “> 福子 《1i> 
<1i title=* 敬 蔓 "》 荐 蔓 </1i> 《1i title= 区 全 > 瘦 富 </1i> 
<ful> ul> 
<fbodr> fbody> 
html> <fhtml> 
0 3-25 0wraplnnerlIDDODOOOOOD 


03 24 0DwrapAllIDDOOOO0OO00D0 
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0 30 
























































jQuery0D DOMDD 
3.2.8 DODOD 

在 jQuery 中 ， 用 attr0 方 法 来 获取 和 设置 元 素 属性 ，removeAttr0 方 法 来 删除 元 素 属 性 。 

IDDOODOODOO0OO0OO0OO0D 

















如 果 要 获取 <p> 元 素 的 属性 title， 














那么 只 需 








看 要 给 attr(0) 方 法 传递 一 个 参数 ， 即 属性 名 称 
jQuery 代码 如 下 : 
var $para = $("p"); //0D 0 <p>0 口 
va uso oaraatle 




















/00D<p>000000 title 
如 果 要 设置 <p> 元 素 的 属性 title 的 值 ， 也 可 以 使 用 同一 个 方法 ， 不 同 的 是 ， 需 要 传递 两 个 参数 
即 属性 名 称 和 对 应 的 值 。 























jQuery 代码 如 下 : 


Se pp at ti Ot 


/D0000000 
如 果 需 要 一 次 性 为 同一 个 元 素 设 


ES 


置 多 个 


























属性 ， 可 以 使 用 下 面 的 代码 来 实现 : 








SD Nace le 











: "your title"” , "name": "test"” }); 


训 加 加 

注意 : jQuery 中 的 很 多 方法 都 是 同一 个 函数 实现 获取 ( getter ) 和 设置 (setter ) 的 ， 例 如 上 面 的 attr() 

方法 ， 既 能 设置 元 素 属 性 的 值 ， 也 能 获取 元 素 属 性 的 值 。 类 似 的 还 有 html()、textO)、height()、 
widthO0、val0 和 cssO 等 方法 。 


























20000D0 
在 某 些 情况 下 ， 需 要 删除 文档 
该 任务 。 

















P 某 个 元 素 的 特定 属性 ， 可 以 使 用 removeAttr0 方 法 来 完成 
如 果 需 要 删除 <p> 元 素 的 title 属性 ， 可 以 使 用 下 1 




















看 的 代码 实现 ; 
$("p").removeAttr("title"):; 





N00<p00000 tit 
运行 代码 后 ，<p> 元 素 的 title 属性 将 被 


虹 














| 除 。 此 时 <p> 元 素 的 HTML 结构 由 
<p title=O0Oogggogg." Oooog ?</p> 





= 和 四 OOO /> 
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注意 : jQuery1.6 中 新 增 了 prop0 和 removeProp0， 分 别 用 来 获取 在 匹配 的 元 素 集中 的 第 一 个 元 素 的 属 
性 值 和 为 匹配 的 元 素 删 除 设 置 的 属性 。 





329 山上 加 


0 





100OI 

















IUUOD0ODOD 





HTML 代码 如 下 : 


SSIS se 可 机 本 下 本 四 本 和 

















在 上 面 的 代码 中 ,class 也 是 <p> 元 素 的 属性 ， 因 此 获取 class 和 设置 class 都 可 以 使 用 attr0 方 法 

































































例如 使 用 attr0 方 法 来 获取 <p> 元 素 的 class，jQuery 代码 如 下 : 





var p_class 


= Rat elasse 太 WE elass 





也 可 以 使 用 attr0 方 法 来 设置 <p> 元 素 的 class，jQuery 代码 如 下 : 





ate lla lo ne yo essy ne 
运行 代码 后 ， 上 面 的 HTML 代码 将 变 为 如 下 结构 : 


< Classs men .OOO .oo /> 


























addClass() 方 法 。 
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上 面 的 代码 是 将 原来 的 class (myClass) 替换 为 新 的 class (high)。 如 果 此 处 需要 的 是 “追加 ?” 
效果 ，class 属性 变 为 “myClass high”， 即 myClass 和 high 两 种 样式 的 县 加 ， 那 么 我 们 可 以 使 用 












































jQuery 提供 了 专门 的 addClass0 方 法 来 退 加 样式 。 为 了 使 例子 更 容易 理解 ， 首 先 在 <style> 标 签 


























里 添加 男 一 组 样式 : 


<style> 


语 轩 加 加 on 党 


.high{ 


om we oe 
Oo 二 ed 短 回 加 区 天 碍 加 加 加 四 党 


} 
wa 
.another{ 








加 加 


noness tlesit a 


i 


蓝 


color:blue; VE 


} 
</style> 


然后 在 网 页 中 添加 一 个 “追加 class 类 ”的 按钮 ， 按 钮 的 事件 代码 如 下 : 





$("p").addClass("another"); //D0 <p>0 0 000" another” 0 


最 后 当 单 击 “ 追 加 class 类 ”按钮 时 ，<p> 元 素 样 式 就 会 变 为 斜体 ， 而 先前 的 红色 字体 也 会 变 为 
色 ， 显 示 效 果 如 图 3-26 所 示 。 














| 输出 class 类 | | 设置 class 类 | | 追加 class 类 | | 删除 全 部 class 类 ] 
| 暗 除 指定 class 类 | | 重复 切换 class 类 | 


永 刻 感 甘 阐 雇 冉 十 ? 

















0 3-26 addClass()0D 口 


在 Firebug 工具 中 查看 class 代码 如 图 3-27 所 示 。 


























亩 吾 看 编 弓 | phigh < body < html 
控制 各 | HTML C55 肢 本 DOM 网 给 YSlow 


回 html> 

出 <head7 

局 “body》 
<input t7De= “button”yYalue=“ 铀 出 class 关 “17 
《lput t7De= button”¥alue=” 皮 置 class 尖 /> 
《input t7pe=“button”walue=" 筷 各 class 尖 /> 
《Cinput t7Dpe=“button”walue=" 刷 除 宇 部 class 闫 /> 
<input t7pe="button”walue=“ 刷 除 指 证 class 尖 /> 
<input t7pe="button”walue=“ 重 复 切 铁 class 类 */> 

ass=“hieh another”+1t1le=“ 霹 答 价 隶 辫 次 的 水 困 , “> 作 刀 部 次 的 水 果 总 ?<7p 








/htnl> 











0 3-27 classDD 
此 时 <p> 元 素 同 时 拥有 两 个 class 值 ， 即 “high” 和 “another”。 在 CSS 中 有 以 下 两 条 规定 。 
(1) 如 果 给 一 个 元 素 添加 了 多 个 class 值 ， 那 么 就 相当 于 合并 了 它们 的 样式 。 
(2) 如 果 有 不 同 的 class 设 定 了 同一 样式 属性 ， 则 后 者 履 盖 前 者 。 
在 上 例 中 ， 相 当 于 给 <p> 元 素 添加 了 如 下 样式 : 





















































font-weight:bo1d; | 

color : red; 这 加 
font-style:italic: We 0 

COO en CC 








在 以 上 的 样式 中 ， 存 在 两 个 “color” 属 性 ， 而 后 面 的 “color” 属 性 会 覆盖 前 面 的 “color” 属 
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性 ， 因 此 最 终 的 “color” 属 性 的 值 为 “blue”， 而 不 是 “red”。 


样式 最 终 呈 现 为 : 





天 








































































































font-weight :bold: ws OOD 

font-style:italic: ws 0 

Conlon le 这 加 

追加 样式 和 设置 样式 的 区 别 如 表 3-2 所 示 。 

表 3-2 attr() 和 addClass() 的 区 别 

太太 addClass() attr() 
途 追加 样式 设置 样式 

对 同一 个 网 页 元 素 操作 <p>test</p> 
第 1 次 使 用 方法 $("p").addClass("high"): $("p").attr("class","high"): 
第 1 次 结果 <p class="high">test</p> 
再 次 使 用 方法 $("p").addClass("another"): $("p").attr("class","another"): 
最 终结 果 <p class="high another"> test </p> | <p class="another">test</p> 

300000 



































在 上 面 的 例子 中 ， 为 <p> 元 素 迫 加 了 another 样式 。 此 时 <p> 元 素 的 HTML 代码 变 为 : 


<p class="high _ another” title="0D O0000000. 300000000°7</p> 


如 果 用 户 单 击 某 个 按钮 时 ， 要 删除 class 的 某 个 值 ， 那 么 可 以 使 用 与 addClass0 方 法 相反 的 
removeClass() 方 法 来 完成 ， 它 的 作用 是 从 匹配 的 元 素 中 删除 全 部 或 者 指定 的 class。 


例如 可 以 使 用 如 下 的 jQuery 代码 来 删除 <p> 元 素 中 值 为 “high” 的 class: 

















茎 
























































$("p").removeClass("high"); //00<p00000" high" 0 class 
结果 为 : 





ps 
输出 


过 | 


<p class="another" title=<"00O00000 .00000000?</p> 





如 果 要 把 <p> 元 素 的 两 个 class 都 删除 ， 就 要 使 用 两 次 removeClass() 方 法 ， 代 码 如 下 : 


$("p").removeClass("high").removeClass("another"): 

















jQuery 提供 了 更 简单 的 方法 。 可 以 以 空格 的 方式 黄 除 多 个 class 名 ，jQuery 代码 如 下 : 


$("p").removeClass("high another"): 








另外 ,还 可 以 利用 removeClass(0) 方 法 的 一 个 特性 来 完成 同样 的 效果 。 当 它 不 带 参 数 时 ， 就 会 将 
class 的 值 全 部 删除 ，jQuery 代码 如 下 : 





030 jauery00 DOMOO 


$("p").removeClass():; vag ol so | I lass 
此 时 ，<p> 元 素 的 HTML 结构 为 : 

< nn .0 < 
400000 


在 第 2 章 的 案例 研究 中 介绍 了 一 个 方法 ， 即 toggle0，jQuery 代码 如 下 : 























$toggleBtn.toggle(function(){ Woe 


加 加 回回 U0® 
},function(){ 


W 相 加 中间 00@ 
}) 


toggle0) 方 法 此 处 的 作用 是 交 炎 执行 代码 @ 和 代码 两 个 函数 ， 如 果 元 素 原 来 是 显示 的 ， 则 隐 
藏 它 ， 如 果 元 素 原来 是 隐藏 的 ， 则 显示 它 。 此 时 ，toggle0 方 法 主要 是 控制 行为 上 的 重复 切换 。 


另外 jQuery 还 提供 了 一 个 toggleClass() 方 法 控制 样式 上 的 重复 切换 。 如 果 类 名 存在 则 删除 它 ， 
如 果 类 名 不 存在 则 添加 它 。 


例如 对 <p> 元 素 进行 toggleClass() 方 法 操作 。 


jQuery 代码 如 下 : 










































































sp toggleGlsst ono A no en 


当 单 击 “ 切 换 样式 ”按钮 后 ，<p> 元 素 的 HTML 代码 由 





ssngss 
spiclassamyClassianothem titles OO <A> 
当 再 次 单 击 “ 切 换 样式 ”按钮 后 ，<p> 元 素 的 HTML 代码 又 返回 原来 的 状态 : 
































<p class-"nyClass" title-"000000000 .00000000?</p> 
当 不 断 单 击 “切换 样式 ”按钮 时 ，<p> 元 素 的 class 的 值 就 会 在 “myClass” 和 “myClass another” 
之 间 重 复 切 换 。 

500000000000 

hasClass() 可 以 用 来 判断 元 素 中 是 否 含有 某 个 class， 如 果 有 ， 则 返回 true， 否 则 返回 false。 


例如 可 以 使 用 下 面 的 代码 来 判断 <p> 元 素 中 是 否 含有 “another” 的 class: 








































































































Sasass onother os 





` 十 妇 
壮 忆 : 


这 个 方法 是 为 了 增强 代码 可 读 性 而 产生 的 。 在 jQuery 内 部 实际 上 是 调用 了 is0) 方 法 来 完成 这 
个 功能 的 。 该 方法 等 价 于 如 下 代码 : 
bp Ris anovner 





3.2.10 OUOOO0OODO HIMLUODODOD 


10 htmli0 DO 











此 方法 类 似 于 JavaScript 中 的 innerHTML 属性 ， 可 以 用 来 读 取 或 者 设置 某 个 元 素 

















的 HTML 内 容 。 





为 了 更 清楚 地 展示 效果 ， 将 <p> 元 素 的 HTML 代码 改 成 : 
sD ele ne 
然后 用 html0 方 法 对 <p> 元 素 进行 操作 : 

















vap eon nom WAM 
emp pa | <0 | | 





运行 代码 后 ， 效 果 如 图 3-28 所 示 。 





你 最 喜欢 的 水 果 是 ? 
。 苹果 
。 棋 子 
。 荡 六 








全 <strong> 你 鼠 吾 欢 的 水 采 是 ?</strong> 











03:28 00<p>000 HMOO 




















如 果 需 要 设置 某 元 素 的 HTML 代码 ， 那 么 也 可 以 使 用 该 方法 ， 不 过 需要 为 它 传递 一 个 参数 。 
例如 要 设置 <p> 元 素 的 HTML 代码 ， 可 以 使 用 如 下 代码 : 




















Se or alan re | | nl a | 0 | lai mo 





注意 : html0 方 法 可 以 用 于 XHTML 文档 ， 但 不 能 用 于 XML 文档 。 





20 text()0D 品 
































此 方法 类 似 于 JavaScript 中 的 innerText 属性 ， 可 以 用 来 读 取 或 者 设置 某 个 元 素 中 的 文本 内 容 。 
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继续 使 用 以 上 的 HTML 代码 : 














<p es ON sis 2 us 4 
用 text() 方 法 对 <p> 元 素 进行 操作 ; 





var p text = $("p").text(); A < ON 
alert(p_ text); CAS | 


运行 代码 后 ， 效 果 如 图 3-29 所 示 : 








你 最 喜欢 的 水 果 是 ? 


。 桶 子 
。 波 区 

















0 3-29 00<pz0000000 


与 html(0 方 法 一 样 ， 如 果 需 要 为 某 元 素 设置 文本 内 容 ， 那 么 也 需要 传递 一 个 参数 。 例 如 对 <p> 
元 素 设 置 文本 内 容 ， 代 码 如 下 : 









































人 < 





注意 : (1) JavaScript 中 的 innerText 属性 并 不 能 在 Firefox 浏览 器 下 运行 ， 而 jQuery 的 text() 方 法 支 
持 所 有 的 浏 览 器 。 
(2) text0 方 法 对 HTML 文档 和 XML 文档 都 有 效 。 





30 valWDU 0 


此 方法 类 似 于 JavaScript 中 的 value 属性 ， 可 以 用 来 设置 和 获取 元 素 的 值 。 无 论 元 素 是 文本 
框 ， 下 拉 列 表 还 是 单 选 框 ， 它 都 可 以 返回 元 素 的 值 。 如 果 元 素 为 多 选 ， 则 返回 一 个 包含 所 有 选择 
的 值 的 数组 。 


如 图 3-30 所 示 ， 这 是 某 网 站 的 邮箱 登录 界面 ， 默 认 状 
态 下 ， 邮 箱 地 址 文本 框 和 邮箱 密码 框 内 分 别 有 “ 请 输入 邮箱 ”上 免费 注册 a 
地 址 ”和 “请 输入 邮箱 密码 ”的 提示 。 ee 


























































































































当 将 鼠标 聚焦 到 邮箱 地 址 文本 框 时 ， 文 本 框 内 的 “请 输入 邮箱 地 址 ”文字 将 被 清空 ， 效 果 如 
图 3-31 所 示 。 

















如 果 此 时 未 在 邮箱 地 址 框 中 输入 任何 内 容 , 而 将 鼠标 焦点 直接 聚焦 到 密码 输入 框 ， 则 会 发 现 密 
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码 框 内 的 提示 文字 被 清空 了 ， 同 时 邮箱 地 址 输入 框 的 提示 也 被 还 原 了 ， 效 果 如 图 3-32 所 示 。 








































| |]@8 首 加 进入 箱 了 进入 邮箱 

青 考 入 邮箱 室 吾 CE ] 9 eH/ 赤 记 住 状态 

免费 注册 忘记 密码 ? 免费 注册 忘记 内 码 ? 

03-31 0000000000000 D0332 [0000000000000000000000000 





要 实现 以 上 例子 展示 的 功能 ， 可 以 使 用 val0 方 法 。 实 现 步 又 如 下 。 


第 1 步 : 设计 网 页 的 基本 结构 。 在 页 面 中 添加 两 个 文本 框 ， 分 别 对 两 个 文本 框 设 置 ia， 同时 设 
置 它们 的 默认 值 为 “请 输入 邮箱 地 址 ”和 “请 输入 邮箱 密码 ” 


HTML 代码 如 下 : 






































<input type="text" id="address" value="0D O00000"/> 
<input type="text"” id="password" value="0D O000000"/> 






























































<input type="button” value="0 DO "/> 
呈现 的 网 页 效果 如 图 3-33 所 示 。 请 输入 邮箱 地 址 
第 2 步 : 对 “地 址 框 ”进行 操作 。 请 输入 邮箱 密码 
当地 址 框 获取 鼠标 焦点 时 ， 如 果 地 址 框 的 值 为 “请 输入 邮箱 地 址 ” 则 ”| 总 录 

将 地 址 框 中 的 值 清空 。 可 以 使 用 如 下 的 jQuery 代码 : 03-33 00000 

















$("#address").focus(function(){ 
Va eae = hs a 
if(txt valve== 0 Oo oo 


Stam) va ”y 





| 


当地 址 框 失去 鼠标 焦点 时 ， 如 果 地 址 框 的 值 为 室 ， 则 将 地 址 框 的 值 设 置 为 “请 输入 邮箱 地 址 ” 
可 以 使 用 如 下 的 jQuery 代码 : 


























$("#address").blur(function(){ 
Valvealue emSRVail ON i] 
if(txt value==""){ 
Gt ns a 
} 





注意 : focusO 方 法 相当 于 JavaScript 中 的 onfocusO 方 法 ， 作 用 是 处 理 获 得 焦点 时 的 事件 。 
blur0 方 法 相当 于 JavaScript 中 的 onblur0 方 法 ， 作 用 是 处 理 失 去 焦点 时 的 事件 。 





0 30 jQuery00 DOMDOD 








第 3 步 : 对 “密码 框 ” 进 行 操作 ， 实 现 过 程 与 “地 址 框 ” 相 同 。 
此 时 ， 类 似 于 YAHOO 邮箱 登录 框 的 提示 效果 就 完成 了 。 完 整 代 码 如 下 : 














加 
<script src="../../scripts/jquery.js" type="text/javascript"> </script> 





















































“SCOIDE> 
$(function(){ 
A 
$("#address").focus(function(){ 本 和 国语 
var txt value = $(this).val(); 加 加 加 加 
if(txt value==" 回 回回 回 回回 加 "4 
il al 加 时 轩 加 轩 加 加 加 加 加 加 加 加 
} 
De 
$("#address").blur(function(){ 2a a a 
va te lve 0 Ems valle 训 国 加 加 加 加 加 加 加 加 
if(txt value==""){ 
SR 
} 
} 


加 加 加重 加 和 加 加 灿 
$("#password").focus(function(){ 
Wave bls val 
nivale .这 
Sn) va 
} 
}) 
$("#password").blur(function(){ 
Var 人 sell 
if(txt value==""){ 


Sams ye va la 





于 

Ds 

</script> 
</head> 
<body> 
<input type="text" id="address" value="D O00000"/> <br/><br/> 
<input type="text" id="password" value="0 O000000"/> <br/><br/> 
<input type="button" value="D 0 "/> 
Wi 


在 该 例子 中 ， 也 可 以 使 用 表单 元 素 的 defaultValue 属性 来 实现 同样 的 功能 ，defaultValue 属 ' 


























ee 


生 包 
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含 该 表单 元 素 的 初始 值 。 代 码 如 下 : 















































$("#address").focus(function(){ sa a a aa a ol oa 
var txt value = $(this).val(); 廊 呈 加 加 加 加 加 加 思 
w(xmvelue nsernavule val /ena Val 
sunnsy veal a ea 
} 
DE 
$("#address").blur(function(){ VA 
Value 省 US val VA 
if(txt value==""){ 
SCuns ee Censor A 
} 
用 


/000000000 





注意 : this 指向 当前 的 文本 框 , “this.defaultValue” 就 是 当前 文本 框 的 默认 值 。 











通过 上 面 的 例子 可 以 发 现 val0 方 法 不 仅 能 设置 元 素 的 值 ， 同 时 也 能 获取 元 素 的 值 。 另 外 ，val0) 






























































方法 还 有 另外 一 个 用 处 ， 就 是 它 能 使 select〈 下 拉 列 表 框 )、checkbox (多 选 框 ) 和 radio (六 





选 框 ) 



































相应 的 选项 被 选中 ， 在 表单 操作 中 会 经 常用 到 。 
下 面 构建 一 个 网 页 来 演示 val0 方 法 的 选中 功能 。 
HTML 代码 如 下 : 





























<select id="single"> 
<option>0 0 10 </option> 
<option>0 0 20 </option> 
<option>0 0 30 </option> 

</select> 














<select id="multiple" multiple="multiple” style="height:120px:"> 
<option selected="selected">0 0 10 </option> 
<option>0 0 20 </option> 
<option>0 0 30 </option> 
<option>0 0 40 </option> 
<option selected="selected">0 0 50 </option> 
</select> 
t type="checkbox” value="check1l"/> 0 

















t type="checkbox” value="check2"/> 0 











t type="checkbox” value="check4"/> 0 











U L 
U 

<input 七 Xpes checkbox ”Values' check3 /二 口上 口 3 
U 国医 4 
U 


t type= "radio”value="radiol"/> 口 口 


030 jQueryD 0 DoM0D 


<input type="radio" value="radio2"/> [D002 
<input type="radio" value="radio3"/> 00 3 


运行 代码 后 ， 显 示 效 果 如 图 3-34 所 示 。 
该 网 页 中 一 些 元 素 是 默认 选中 的 ， 可 以 通过 val(0) 方 法 来 改变 它们 的 选中 项 。 如 果 要 使 第 1 个 
下 拉 框 的 第 2 项 被 选中 ， 可 以 用 以 下 jQuery 代码 实现 : 


























SO snole eval 
如 果 要 使 下 拉 列 表 的 第 2 项 和 第 3 项 被 选中 ， 可 以 用 以 下 jQuery 代码 实现 : 











$C"#multiple’).val (E00 20" 00302): Woooooo0o00 
依照 上 面 类 似 的 写法 ， 下 面 的 代码 可 以 使 多 选 框 和 单 选 框 被 选中 ，jQuery 代码 如 下 : 






































$(":checkbox").val(["check2","check3"]): 
HO mead val ead 


运行 代码 后 ， 显 示 效 果 如 图 3-35 所 示 。 





















































选择 2 号 
选择 3 号 
选择 4 号 
选择 ! 有 = | Jv| 选择 2 号 v 
多 选 1 多 选 2 回 多 选 3 加 多 选 4 
0 3-34 000 0 3-35 000000000 








注意 : 在 上 面 这 个 例子 中 ， 可 以 使 用 val() 方 法 ， 也 可 以 使 用 attr0 方 法 来 实现 同样 的 功能 。 
$("#single option:eq(1)").attr("selected", true ); 
$("[value=radio2]:radio").attr("checked", true ); 





3.2.11 0000 
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该 方法 用 于 取得 匹配 元 素 的 子 元 素 集合 。 
此 处 使 用 本 章 开 头 所 夯 的 那 颗 DOM 树 的 结构 ， 如 图 3-36 所 示 。 


根据 DOM 树 的 结构 ， 可 以 知道 各 个 元 素 之 间 的 关系 以 及 它们 子 节 点 的 个 数 。<body> 元 素 下 有 
<p> 和 <ul> 两 个 子 元 素 ，<p> 元 素 没 有 子 元 素 ，<ul> 元 素 有 3 个 <li> 子 元 素 。 
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UUU jQuery00 200 




















0 3-36 DOMO 

下 面 使 用 children0) 方 法 来 获取 匹配 元 素 的 所 有 子 元 素 的 个 数 。 
jQuery 代码 如 下 : 
var $body = $("body").children():; 
var $p = $("p").children(); 
var $ul = $("ul").children(): 
alert($body. length ):; VO OY el 
alert($p.length ); Wl 
alert($ul.1length ); Wav 0 | | 
for(var i=0,1en=$ul.length;i< len;i++){ 

alert($ul[i].innerHTML ): VA SM 
| 





注意 : children() 方 法 只 考虑 子 元 素 而 不 考虑 其 他 后 代 元 素 。 





20 next()0 0 

该 方法 用 于 取得 匹配 元 素 后 面 紧邻 的 同辈 元 素 。 

从 DOM 树 的 结构 中 可 以 知道 <p> 元 素 的 下 一 个 同辈 节点 是 <ul>， 
获取 <ul> 元 素 ， 代 人 码 如 下 : 

var Spl = $C"p").nextO); nlnllnlnEs lolnlnininilnln 

得 到 的 结果 将 是 : 









































<ul> 
< 和 title='0 0 "S00 </i> 
ee 





因此 可 以 通过 next0 方 法 来 


030 jauery00 DOMOO 


<1i title='0 0 '>0 0 </1i> 
</Uul> 


30 prev()0 品 
该 方法 用 于 取得 匹配 元 素 前 面 紧邻 的 同辈 元 素 。 


从 DOM 树 的 结构 中 可 以 知道 <ul> 元 素 的 上 一 个 同辈 节点 是 <sp>， 因 此 可 以 通过 prev(0) 方 法 来 获 
取 <p> 元 素 ， 代 码 如 下 : 


va So SC 
得 到 的 结果 将 是 : 


Ee 
























































40 siblings( 癌 口 
该 方法 用 于 取得 匹配 元 素 前 后 所 有 的 同辈 元 素 。 
在 第 1 章 导航 栏 的 例子 中 有 段 代 码 如 下 : 


























sleeve = elmekn nen 
$(this).addClass("current") A enema 
.Nnext().show() eA 
.parent().siblings().children("a").removeClass("current") 
Cu me 
.next().hide(); 丰硕 革 本 三 奈 硬 本国 


return false: 





os 
上 面 的 代码 中 就 用 到 了 siblings0 方 法 ， 当 时 是 为 了 获取 匹配 元 素 的 兄弟 节点 ， 即 获取 匹配 元 素 
的 同 蕴 元素。 


以 DOM 树 的 结构 为 例 。<ul> 元 素 和 <p> 元 素 互 为 同 碍 元 素 ，<ul> 元 素 下 的 3 个 <li> 元 素 也 互 为 
同辈 元 素 。 如 果 要 获取 <p> 元 素 的 同 非 元 素 ， 则 可 以 使 用 如 下 代码 ; 

































































Var Hoe Seo siones ty A < ol of a 


得 到 的 结果 将 是 : 





<ul> 
大 中 ies /<A 
3 轴 居 加 LEE 0 <A 
<Iineilea Wa <Aie 
</ul> 
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50 closest() 




















该 方法 用 于 取得 最 近 的 匹配 元 素 。 
身 。 如 果 不 匹 配 则 向上 查找 父 元 素 ， 逐 级 
回 一 个 空 的 jQuery 对 象 。 






































向 上 直到 找到 








先 检查 当前 元 素 是 否 匹配 ， 如 果 匹 配 则 直接 返回 元 素 本 



































比如 ， 给 点 击 的 目标 元 素 的 最 近 的 于 元 素 添加 颜色 ， 可 以 使 用 如 下 代码 





$(document).bind("click", function (e) { 


(eange 动 页 losEsilrl ess( color ned 


}) 


60 parent()D parents()D closest()D 0 OO 


parent()，parents() 与 closest() 方 法 两 两 之 
如 表 3-3 所 示 。 读 者 可 以 根据 实际 需求 灵活 





表 3-3 
方法 

















间 有 类 似 又 有 











也 选择 使 用 哪个 方法 。 























parent()，parents() 与 closest() 的 区 别 


描 述 


示 


不 同 , 在 此 简短 的 区 分 一 下 这 三 个 方法 。 


例 


匹配 选择 器 的 元 素 。 如 果 什 么 都 没 找到 则 返 








parent() 


获得 集合 中 每 个 匹配 元 素 的 父 级 元 素 























parent() 返 回 一 个 元 素 节 点 。 


$('.item-1").parent().css('‘background-color', 'red'); 
parent() 方 法 从 指定 类 型 的 直接 父 节 点 开始 查找 。 








parents() 


获得 集合 中 每 





> 





匹配 元 素 的 祖先 元 素 











$('.item-1").parents('ul').css('background-color', 'red'); 
parents() 方 法 查找 方式 同 parent() 方 法 类 似 ， 不 同 的 一 
点 在 于 ， 当 它 找 到 第 一 个 父 节 点 时 并 没有 停止 查找 ， 
最 后 返回 多 个 父 节 点 














closest() 


从 元 素 本 身 开始 ， 
返回 最 先 














匹配 的 祖先 元 素 








除 此 之 外 ， 在 jQuery 中 还 有 
等 ， 此 处 不 再 袭 述 ， 读 者 可 以 查看 附录 的 jQuery 速 
法 有 一 个 共同 点 ， 都 可 以 使 用 jQuery 表达 式 作 为 它 个 


























3.2.12 CSS- DOM 0 DO 


CSS-DOM 技术 简单 来 说 就 是 读 取 和 设置 
足 是 无 法 通过 它 来 提取 到 通过 外 部 CSS 设置 的 样 


可 以 直接 利用 cssO 方 法 获取 元 素 的 样式 





SS OO 


























逐 级 向 上 级 元 素 匹 配 ， 并 














$(C.item-l).closest(ul).cssCbackground-color，red); 











closest() 方 法 查找 是 从 包含 











parents0) 方 法 类 似 ， 不 同 点 训 
一 个 元 素 节 点 




















style 对 象 的 各 种 属性 。style 属 
































ss el 


式 信息 ， 然 而 在 jQuery 中 ， 
属性 ，jQuery 代码 如 下 : 








中 

















身 的 节点 找 起 ， 它 同 


it 在 于 它 只 返回 匹配 的 第 


性 和 











很 多 遍历 节点 的 方法 ， 例 如 find0、filter0、nextAH1O0 和 prevAll0 
表 文 档 。 值 得 注意 的 是 ， 这 些 裔 历 DOM 方 





民有 用 ， 但 最 大 不 











这 些 都 是 非常 的 简单 。 


0 30 jQuery00 DOMDD 





























无 论 color 属性 是 外 部 CSS 导入 ， 还 是 直接 拼接 在 HTML 元 素 里 〈 内 联 )，css0 方 法 都 可 以 获 


取 到 属性 style 里 的 其 他 属性 的 值 。 

































































也 可 以 直接 利用 css(0) 方 法 设置 某 个 元 素 的 单个 样式 ， 例 如 ; 





ID SS ol ed WW 
与 attr0 方 法 一 样 ，css0 方 法 也 可 以 同时 设置 多 个 样式 属性 ， 代 码 如 下 : 























$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888")})) 
WO 











注意 : (1 ) 如 果 值 是 数字 ， 将 会 被 自动 转化 为 像素 值 。 
(2) 在 css0 方 法 中 ， 如 果 属 性 中 带 有 “-” 符 号 ， 例 如 font-size 和 background-color 属性 ， 
如 果 在 设置 这 些 属性 的 值 的 时 候 不 带 引 号 ， 那么 就 要 用 驼峰 式 写 法 ， 例 如 : 
$("p").css({ fontSize : "30px"” , backgroundColor : "#888888" }) 
如 果 带 上 了 引号 ， 既 可 以 写成 “font-size”， 也 可 以 写成 “fontSize”。 
总 之 建议 大 家 加 上 引号 ， 养 成 良好 的 习惯 。 









































对 透明 度 的 设置 ， 可 以 直接 使 用 opacity 属性 ，jQuery 已 经 处 理 好 了 兼容 性 的 问题 ， 如 下 代码 
所 示 ， 将 <p> 元 素 的 透明 度 设 置 为 半 透 明 : 











SO SS ol 
如 果 需 要 获取 某 个 元 素 的 height 属性 ， 则 可 以 通过 如 下 jQuery 代码 实现 : 





$(element).css("height"); 
在 jQuery 中 还 有 另外 一 种 方法 也 可 以 获取 元 素 的 高 度 ， 即 height()。 它 的 作用 是 取得 匹配 元 素 
当前 计算 的 高 度 值 (px)。jQuery 代码 如 下 : 





















































SD eign UO 

height0 方 法 也 能 用 来 设置 元 素 的 高 度 ， 如 果 传 递 的 值 是 一 个 数学 ， 则 默认 单位 为 px。 如 果 要 
用 其 他 单位 〈“ 例 如 em)， 则 必须 传递 一 个 字符 串 。jQuery 代码 如 下 : 

$("p").height(100); /00<pz0000000 100px 

$("p") .height("10em"): /00<p>z0000000 10en 





注意 : (1) 在 jQuery 1.2 版 本 以 后 的 height() 方 法 可 以 用 来 获取 window 和 document 的 高 度 。 
(2 ) 两 者 的 区 别 是 : css() 方 法 获取 的 高 度 值 与 样式 的 设置 有 关 ， 可 能 会 得 到 "auto"， 也 可 能 
得 到 "10px" 之 类 的 字符 串 ; 而 height() 方 法 获取 的 高 度 值 则 是 元 素 在 页 面 中 的 实际 高 度 ， 与 
样式 的 设置 无 关 ， 并 且 不 带 单位 。 
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与 height( 方 法 对 应 的 还 有 一 个 width0 方 法 ， 它 可 以 取得 匹配 元 素 的 宽度 值 (px )。 














$("p") .width(): /00<p>000000 
同样 ，width() 方 法 也 能 用 来 设置 元 素 的 宽度 。 























$("p").width("400px"); yo eo a 
此 外 ， 在 CSS-DOM 中 ， 关 于 元 素 定 位 有 以 下 几 个 经 常 使 用 的 方法 。 











10 offset()0D 口 

它 的 作用 是 获取 元 素 在 当前 视窗 的 相对 偏 移 ， 其 中 返回 的 对 象 包含 两 个 属性 ， 即 top 和 left， 
它 只 对 可 见 元 素 有 效 。 例 如 用 它 来 获取 <p> 元 素 的 的 偏 移 量 ，jQuery 代码 如 下 : 

var otiset = $C Dp offset(),s wes oiser 


var left = offset. left; Va 
var top = offset.top: ya 
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它 的 作用 是 获取 元 素 相 对 于 最 近 的 一 个 position 样式 属性 设置 为 relative 或 者 absolute 的 祖 
父 革 点 的 相对 偏 移 ， 与 offset0 一 样 ， 它 返回 的 对 象 也 包括 两 个 属性 ， 即 top 和 left。jQuery 代 
人 码 如 下 : 


















































Var position = $("p").position(): //D 0 <p>0 0 0 position() 
var left = position.left; pao al og 
var top = position.top; wa i oo a 


30 scrollTop()D DO DO scrollLeft()0D 0 


这 两 个 方法 的 作用 分 别 是 获取 元 素 的 深 动 条 距 顶 端的 距离 和 距 左 侧 的 距离 。 例 如 使 用 下 面 的 代 
码 获取 <p> 元 素 的 深 动 条 距离 : 



























































Vareso so 
var scrollTop = $p.scrollTop(); Va 
vale es oiler SS 


另外 ， 可 以 为 这 两 个 方法 指定 一 个 参数 ， 控 制 元 素 的 滚动 条 滚动 到 指定 位 置 。 例 如 使 用 如 下 代 
码 控 制 元 素 内 的 滚动 条 滚动 到 距 顶 端 300 和 距 左 侧 300 的 位 置 : 















































("textarea").scrollTop(300): sa 0 a a oa ogo og 
("textarea").scrollLeft(300):; 部 轩辕 加 








至 此 ， 已 经 将 jQuery 中 常用 的 DOM 操作 (包括 DOM Core，HTML-DOM 和 CSS-DOM) 都 
已 经 介绍 完毕 。 以 下 将 结合 这 些 方法 ， 研 究 一 个 融合 了 DOM 操作 的 实例 。 




















vx 是 
操作 。 
1000 
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= 








在 这 一 节 中 ， 将 以 某 网 站 的 超 链接 和 图 片 提示 效果 为 例 ， 来 理解 和 巩固 jQuery 中 的 DOM 


UUOU00 






































在 现代 的 浏览 器 中 ， 它 们 已 经 自 带 了 超 链 接 提示 ， 只 需 在 超 链接 中 加 入 title 属性 就 可 以 了 。 
HTML 代码 如 下 : 














<a href="#"” title=" 这 是 我 的 超 链接 提示 .">0 0 </a> 
然而 这 个 提示 效果 的 响应 速度 是 非常 缓慢 的 , 考虑 到 良好 的 人 机 交互 , 需要 的 是 当 鼠 标 移动 到 










































































超 链 接 的 那 一 瞬间 就 出 现 提 示 。 这 时 就 需要 移 除 <a> 标 签 中 的 title 提示 效果 ， 上 自己 动手 做 一 个 类 似 
功能 的 提示 。 提示 
首先 在 空白 的 页 面 上 ， 添 加 两 个 普通 超 链接 和 两 个 带 有 class 的 超 链接 。 | 
































0337 0000000 





HTML 代码 如 下 : 


<p><a href="#" class="tooltip" title="D O0000000 1." 00 1.</a></p> 
<p><a href="#" class="tooltip" title="D O0000000 2." 00 2.</a></p> 
<p><a href="#" title="00O00000 1." 0000 1.</a> </p> 
<p><a href="#" title="000000 2." 0000 2.</a> </p> 








class 为 tooltip 的 超 链接 添加 mouseover 和 mouseout 事件 ，jQuery 代码 如 下 : 


$("a.tooltip").mouseover(function(){ 
yall le 

}) .mouseout (function(){ 
valle 


Ds 


实现 这 个 效果 的 具体 思路 如 下 。 
(1) 当 鼠 标 滑 入 超 链 接 。 
Q@ 创建 一 个 <div> 元 素 ，<div> 元 素 的 内 容 为 title 属性 的 值 。 





Q 将 色 








上 建 的 元 素 追 加 到 文档 中 。 








@) 为 它 设 置 x 坐标 和 y 坐标 ， 使 它 显示 在 鼠标 位 置 的 劳 边 。 


(2 省 




















鼠标 滑 出 超 链接 时 ， 移 除 <div> 元 素 。 








根据 分 析 的 思路 ， 写 出 如 下 jQuery 代码 : 


91 


92 


$(function(){ 
$("a.tooltip").mouseover(function(e){ 
交加 国医 es 二 加 有 加 
Var tooltip="<div id="tooltip'>"+this.title+t"</div>": 
$("body").append(tooltip); //00000000 
$("#tooltip") 
essiel 
野生 GREY DX 
ent -espadgeX re ox 
Bsnowt Tast Ooo/ > 
}) .mouseout (function(){ 
$("#tooltip").remove():  //00O 
je 
六 


运行 效果 ， 如 图 3-38 所 示 。 





























此 时 的 效果 有 两 个 问题 : 首先 是 当 鼠 标清 过 后 ，<a> 标 签 中 的 title 属性 的 提示 也 会 出 现 ， 其 次 
是 设置 zx 坐标 和 y 坐标 的 问题 ， 由 于 自制 的 提示 与 鼠标 的 距离 太 近 ， 有 
时 候 会 引起 无 法 提示 的 问题 (鼠标 焦点 变化 引起 mouseout 事件 )。 













































































为 了 移 除 <a> 标 签 中 自 带 的 title 提示 功能 ， 需 要 进行 以 下 几 个 步骤 。 0 3.38 0 



































0 
(1) 当 鼠 标 滑 入 时 ， 给 对 象 添 加 一 个 新 属性 ， 并 把 tide 的 值 传 给 这 个 属性 ， 然 后 清空 属性 title 
的 值 。 


jQuery 代码 如 下 : 











Wr 


























this.myTitle = this.title:; 
bh le 
Var tooltip = "<div id='tooltip'>"+ this.myTitle +"</div>": 

















(2) 当 鼠 标 滑 出 时 ， 再 把 对 象 的 myTitle 属性 的 值 又 赋 给 属性 title。 














jQuery 代码 如 下 : 


this.title = this.myTitle: 





注意 ; 为 什么 当 鼠 标 滑 出 时 ， 要 把 属性 值 又 赋 给 属性 title 呢 ? 
因为 当 鼠 标 滑 出 时 ,需要 考虑 再 次 滑 入 时 的 属性 title 值 ,如 果 不 将 myTitle 的 值 重新 赋 给 title 
属性 ， 当 再 次 滑 入 时 ，title 的 值 就 为 空 了 。 











为 了 解决 第 2 个 问题 〈 自 制 的 提示 与 鼠标 的 距离 太 近 ， 有 时 候 会 引起 无 法 提示 的 问题 )， 需 要 
重新 设置 提示 元 素 的 top 和 left 的 值 ， 代 码 如 下 所 示 ， 为 top 增加 了 10px， 为 left 增加 了 20px。 

















0 30 


VS 0 
Val yy = ls 
$("#tooltip").css({ 
"top": (e.pageY+y) + "px", 
ent (epageXDo px 
| 


解决 这 两 个 问题 后 ， 完 整 的 代码 如 下 : 


$(function(){ 
var x = 10:; 
vary = 20F 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title: 
Brnsee le 
Var tooltip = "<div id='tooltip'>"+this.myTitler"</div>"; 
wd 
$("body").append(tooltip): #0 No oi gr 
$("#tooltip") 
-CS 
“七 OP" (e.pageY+y) + "pxX", 
"left": (e.pageX+x) + "px" 
}).show("fast"); 加 时 加 关 轩 加 轩 浆 加 轩 加 轩 夺回 轩 
}) .mouseout (function(){ 
this.title = this.myTitle: 
$("#tooltip").remove(): WN 





}) 

此 时 ， 鼠 标 滑 入 和 滑 出 显示 已 经 没 问 题 了 ， 但 当 鼠 标 在 超 链 接 上 移动 
时 ,提示 效果 并 不 会 跟着 鼠标 移动 。 如 果 需 要 提示 效果 跟随 鼠标 一 起 移动 ， 
可 以 为 超 链接 加 上 一 个 mousemove 事件 ，jQuery 代码 如 下 : 














| 中 











$("a.tooltip").mousemove(function(e){ 
$("#tooltip") 
SU 
ED ermal ye 
"left": (e.pageX+x) + "px" 
和 


























这 样 ， 当 鼠标 在 超 链 接 上 移动 时 ， 提 示 效 果 也 会 跟着 一 起 移动 了 。 
到 此 ， 超 链接 提示 效果 就 完成 了 ， 完 整 的 jQuery 代码 如 下 : 











jQuery0D DOMDD 











提示? [是 我 的 超 谎 按 提 示 2 








0 3-39 0000 
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$(function(){ 
Ww 
Va 0 20 


$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title: 
this.title = "" 

Vo 


(body Danoend( oo A 
("#to01tip") 
SS 
"top": (e.pageY+y) + "pxX", 
"left": (e.pageX+x) + "px" 
}).show("fast"); 训 轩 轩 关 轩 加 加 泡 轩 加 加 轩 加 加 加 
}) .mouseout (function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(); 
}) .mousemove(function(e){ 
$("#tooltip") 
SS 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}) 





/D0 


) 
20000I 
稍微 修改 上 面 的 代码 ， 就 可 以 做 出 一 个 图 片 的 提示 效果 。 
先 在 空白 网 页 中 加 入 图 片 ，HTML 代码 如 下 : 















































<ul> 











<Ine<anel= mages/apolenl baer loss ool eeea 


1 ja dl no Pe /s/s 


applen2ejpo eal odmano /</a<W> 
<In<amhnref= mges/appleneap node 
applenompa ol nonen/ Aa/ 
<1i><a href="images/apple 4 bigger.jpg" 
applemAe jog nae /WA 

< 


设置 样式 后 ， 初 始 化 效果 如 图 3-40 所 示 。 






































var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>"; 


anei ndes aol ls oo one 





class="tooltip"” title="0 [0 


class="tooltip” title=" 吕 中 0 


iPod"><img src="images/apple_ 


iPod nano"><img src="images/ 


iPhone"><img src="images/ 


Mac"><img src="images/ 





























0340 00000 
参考 前 面 的 超 链 接 提 示 效 果 的 代码 ， 只 需要 将 创建 的 <div> 元 素 的 代码 






































VA Cv 
Var tooltip = "<div id='tooltip'>"+ this.mylitle +"</div>"; 


改 为 


Vo 
Varnesoolpe <a oot <nmonsne= emi al a /Amv 


就 可 以 了 。 当 鼠标 滑 过 图 片 后 ， 显 示 效 果 如 图 3-41 所 示 。 














D3-41 000000 














为 了 使 效果 更 为 人 性 化 , 还 需要 为 图 片 增加 说 明文 字 , 即 提示 出 来 的 大 图 片 下面 出 现 





的 介绍 文字 。 


可 以 根据 超 链 接 的 title 属性 值 来 获得 图 片 相应 的 介绍 文字 ，jQuery 代码 如 下 : 

















this.myTitle = this.title: 
Ghiblien 
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "" 


然后 将 它 追 加 到 <div> 元 素 中 ， 代 码 如 下 : 








片 相 应 
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var tooltip = "<div id=' tooltip ><img src=""+ this.href +"" alts 口上 日 品目 上 日 /二 imgTi 世 ler </div> 





注意 : 在 判断 this.myTitle 是 否 为 " "时 ， 使 用 了 三 元 运算 。 
三 元 运算 结构 为 : Boolean? 值 1: 值 2。 它 的 第 1 个 参数 必须 为 布尔 值 。 
当然 三 元 运算 也 可 以 用 “ifO{ jelse{f }” 代 蔡 ， 例 如 : 
var imgTitle; 
if(this.myTitle){ 
imgTitle = "<br/>" + this.myTitle: 














}else{ 
imgTitle = "" 
} 
这 样 ， 图 方 提示 效果 就 完成 了 ， 当 鼠标 滑 过 图 片 时 ， 图 片 会 出 现 预 览 的 大 图 ， 大 图 下 面 还 会 有 


























介绍 文字 。 效 果 如 图 3-42 所 示 。 

















苹果 iPod nano 


0342 000000 


完整 的 jQuery 代码 如 下 : 


$(function(){ 
var x = 10: 
var y = 20: 


$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title: 
bseiene 
Var imglitle = this.myTitle? "<br/>" + this.myTitle : "™ 
war poo = <<ainveid booltio <Imog sne= tense val a ma ile 


“VOY VA sv 


030 jauerv00 DoM0D 


$("body") .append(tooltip) : Ve 
$("#tooltip") 
-CS 
"top": (e.pageY+y) + "pxX", 
ert enadgew 
}) .show("fast"); 加 
}) .mouseout (function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(): 为 癌 回 
}) .mousemove(function(e){ 
$("#tooltip") 
-CS 
"top (e.pageY+y) + "px ， 
LE epageXmoO ne nx 


bs 
)) 
到 此 ， 超 链接 提示 和 图 片 提 示 效 果 就 都 完成 了 。 此 处 仅仅 用 了 jQuery 中 的 几 个 DOM 操作 方 
法 ， 就 完成 了 很 友好 的 动态 提示 效果 。 


“Yl 


本 章 开 篇 简要 地 介绍 了 什么 是 DOM， 然 后 介绍 了 DOM 操作 分 为 DOM Core 操作 、HTML-DOM 
操作 和 CSS-DOM 操作 ， 以 及 它们 的 功能 和 用 法 ， 然 后 详细 地 介绍 了 jQuery 中 的 DOM 操作 ， 例 如 
创建 节点 ， 插 入 节点 和 设置 属性 等 ， 最 后 以 一 个 超 链接 文字 提示 和 图 片 提示 作为 案例 ， 来 加 深 对 
DOM 操作 的 理解 。 
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U40 jQueryUUUD0UDDO 











JavaScript 和 HIML 之 间 的 交互 是 通过 用 户 和 浏览 器 操作 页 面 时 引发 的 事件 来 处 理 . 。 当 
文档 或 者 它 的 某 些 元 素 发 生 某 些 变化 或 操作 时 , 浏览 器 会 自动 生成 一 个 事件 。 例 如 当 浏 览 器 装载 完 
一 个 文档 后 ， 会 生成 事件 ， 当 用 户 单 击 某 个 按钮 时 ， 也 会 生成 事件 。 虽 然 利 用 传统 的 JavaScript 习 
件 能 完成 这 些 交 互 ， 但 jQuery 增加 并 扩展 了 基本 的 事件 处 理 机 制 。jQuery 不 仅 提 供 了 更 加 优雅 的 
件 处 理 语法 ， 而 且 极 大 地 增强 了 事件 处 理 能 


keg 0000 


4.1.1 [D0 DOM 
























































| 四 


























HT 4 





























hil 
































以 浏览 器 装载 文档 为 例 ， i 浏览 器 会 通过 JavaScript 为 DOM 元 素 添 加 事件 。 
在 常规 的 JavaScript 代码 中 ， 通 常 使 用 window.onload 方法 ， 而 在 jQuery 中 ， 使 用 的 是 
$(document).ready0 方 法 。$(document).ready0 方 法 是 事件 模块 中 最 重要 的 一 个 函数 ， 可 以 极 大 地 提 
高 Web 应 用 程序 的 响应 速度 。jQuery 就 是 用 $(document).ready0) 方 法 来 代替 传统 JavaScript 的 
window.onload 方法 的 。 通 过 使 用 该 方法 ， 可 以 在 DOM 载 入 就 绪 时 就 对 其 进行 操纵 并 调用 执行 它 
所 绑 定 的 函数 。 在 使 用 过 程 中 ， 需 要 注意 $(documentb.ready() 方 法 和 window.onload 方法 之 间 的 细微 
区 别 。 


二 
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$(document).ready0 方 法 和 window.onload 方法 有 相似 的 功能 ， 但 是 在 执行 时 机 方面 是 有 区 别 的 。 
window.onload 方法 是 在 网 页 中 所 有 的 元 素 〈 包 括 元 素 的 所 有 关联 文件 ) 完全 加 载 到 浏览 器 后 才 执 行 ， 
即 JavaScript 此 时 才 可 以 访问 网 页 中 的 任何 元 素 。 而 通过 jQuery 中 的 $(document).ready0 方 法 注册 的 事件 处 
理 程序 ， 在 DOM 完全 就 绪 时 就 可 以 被 调用 。 此 时 ， 网 页 的 所 有 元 素 对 jQuery 而 言 都 是 可 以 访问 的 ， 
晶 是 ， 这 并 不 意味 着 这 些 元 素 关 联 的 文件 都 已 经 下 载 完 毕 。 


举 一 个 例子 ， 有 一 个 大 型 的 图 库 网 站 ,为 网 页 中 所 有 图 片 添加 某 些 行为 , 例如 单 击 图 片 后 让 它 
隐藏 或 显示 。 如 果 使 用 window.onload 方法 来 处 理 ， 那 么 用 户 必 须 等 到 每 一 幅 图 片 都 加 载 完毕 后 ， 
才 可 以 进行 操作 。 如 果 使 用 jQuery 中 的 $(document).ready0 方 法 来 进行 设置 ， 只 要 DOM 就 绪 就 可 
以 操作 了 ， 不 需要 等 待 所 有 图 片 下 载 完毕 。 很 显然 ， 把 网 页 解析 为 DOM 树 的 速度 比 把 页 面 中 的 所 
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有 关联 文件 加 载 完 毕 的 速度 快 很 多 。 
另外 ， 











需要 注意 一 点 ， 由 于 在 $(document).ready0) 方 法 内 注册 的 事件 ， 只 要 DOM 就 绪 就 会 被 





执行 ， 攻 














此 可 能 此 时 元 素 的 关联 文件 未 下 载 完 。 例如 与 图 片 有 关 的 HTML 下 载 完 毕 , 并 且 已 经 解 














析 为 DOM 树 了 , 但 很 有 可 能 图 片 还 未 加 载 完毕 , 所 以 例如 图 片 的 高 度 和 宽度 这 样 的 属性 此 时 不 一 


定 有 效 。 






































要 解决 这 个 问题 ， 可 以 使 用 jQuery 中 男 一 个 关于 页 面 加 载 的 方法 





load(0) 方 法 。load0) 












































方法 会 在 元 素 的 onload 事件 中 绑 定 一 个 处 理 函数 。 如 果 处 理 函 数 绑 定 给 window 对 象 , 则 会 在 所 有 

















内 容 ( 包 

















括 窗 口 、 框 架 、 对 象 和 图 像 等 ) 加 载 完 毕 后 触发 ， 如果 处 理 函 数 绑 定 在 元 素 上 ， 则 会 在 元 








素 的 内 容 加 载 完毕 后 触发 。jQuery 代码 如 下 : 





$(window). load(function(){ 


/如 
a 


等 价 


Dogo 











于 JavaScript 中 的 以 下 代码 : 





window.onload = function(){ 




















Cal 
} 
2000000 
第 一 章 曾 经 用 一 个 表格 〈 表 1-2) 总 结 过 windows.onload 方法 和 $(document).ready0 方 法 的 区 别 ， 


























网 页 中 有 两 个 函数 ，JavaScript 代码 如 下 : 





function one(){ 
alert( "one ) 

















} 
function two(){ 
oe a eo 
} 
当 网 页 加 载 完毕 后 ， 通 过 如 下 JavaScript 代码 来 分 别 调用 one 函数 和 two 函数 : 








window.onload = one ; 





window.onload = two ; 


如 图 4-1 所 示 。 





2 A 
村 
= 三 


onload 强 








当 运 行 代 码 后 ， 发 现 只 弹出 字符 串 “two” 对 话 框 ， 














“one” 对 话 框 不 能 被 弹出 的 原因 是 JavaScript 的 
件 一 次 只 能 保存 对 一 个 函数 的 引用 ， 它 会 自动 用 后 41 Dn. tw nn 












































面 的 函数 覆盖 前 面 的 函数 ， 因 此 不 能 在 现 有 的 行为 上 添加 新 
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的 行为 。 


为 了 达到 两 个 函数 顺序 触发 的 效果 ， 
代码 如 下 : 











口 


AAA 

















创建 





el 
EE 


window.onload=function(){ 
one() 
two( ) : 

} 


虽然 这 样 编写 代码 能 解决 某 些 问 题 ， 
每 个 文件 都 需要 用 到 window.onload 方法 ， 这 种 情况 下 
jQuery 的 $(document).ready0 方 法 能 够 很 好 地 处 理 这 些 情况 ， 每 次 调 
















































































function one( 


){ 


alert("one" ); 


} 


function two(){ 





alert( two ): 


} 
$(document).ready(function(){ 
one(); 


) 
$(document).ready(function(){ 
two() ; 
天 
运行 代码 后 ， 会 先 弹出 字符 串 “one” 对 话 框 ， 
图 4-2 和 图 4-3 所 示 的 效果 。 














个 新 的 JavaScript 方法 来 实现 ， 


然后 弹出 字符 串 


Javascript 


但 还 是 不 能 满足 某 些 需求 ， 例 如 有 多 个 JavaScript 文件 ， 
上 面 提 到 的 方法 编写 代码 会 非常 腑 烦 。 而 
jj$(document).ready() 方 法 都 会 
上 的 顺序 依次 执行 。 例 如 如 下 jQuery 代码 : 














“two” 对 话 框 ， 依 次 显示 





D42 00000”one"000 


043 000 
300000 


DU” tw"000 








如 果 读 者 注意 过 本 书 前 儿童 的 例子 ， 会 发 现 例子 中 并 不 是 用 的 下 面 的 代码 : 














$(document).ready(function(){ 
/0000D0 
}) 
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而 是 用 的 下 面 的 代码 : 











$(function(){ 

WA 

月 

后 者 是 前 者 的 简写 方式 。 








另外 ，$(documenb) 也 可 以 简写 为 $0 。 当 $0 不 带 参 数 时 ， 默 认 参 数 就 是 “document”， 因 此 可 以 


$().ready(function(){ 


/0000 
用 


3 种 方式 都 是 一 样 





4.1.2 00D00 











在 文档 装载 完成 后 ， 如 果 打 算 为 元 素 绑 定 事件 来 完成 茶 些 操作 ， 则 可 以 使 用 bind(O 方 法 来 对 




















的 功能 ， 读 者 可 以 根据 自己 的 喜好 ， 选 择 其 中 的 一 种 。 
































占 

















配 元 素 进 行 特定 事件 的 绑 定 ，bind() 方 法 的 调用 格式 为 : 


bind( type[，data] 











fo) 


bindO 方 法 有 3 个 参数 ， 说 明 如 下 。 








第 1 个 参数 是 事 人 


类 型 ， 类 型 包括 : blur、focus、load、resize、scroll、unload、click、dblclick、 





mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、 
select、submit、keydown、keypress、keyup 和 error 等 ， 当 然 也 可 以 是 自 定义 名 称 。 








第 2 个 参数 为 可 选 参 数 ， 作 为 event.data 属性 值 传递 给 事件 对 象 的 额外 数据 对 和 象 。 





























第 3 个 参数 则 是 用 来 绑 定 的 处 理 函数 。 











注意 : 可 以 发 现 ，jQuery 中 的 事件 绑 定 类 型 比 普通 的 JavaScript 事件 绑 定 类 型 少 了 “on”。 侈 如 鼠 
标 单 击 事件 在 jQuery 中 对 应 的 是 click0 方 法 ， 而 在 JavaScript 中 对 应 的 是 onclick()。 





100000 




















下 面 通过 一 个 示例 来 了 解 bind0 方 法 的 用 法 。 

















HTML 代码 如 下 : 


过 
假设 网 页 中 有 一 个 FAQ， 单 击 “ 标 题 ” 链 接 将 显 








T 
zy 
误 
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<div ids panel > 
<h5 class="head">0 0 0 jQuery?</h5> 
<div class="content"> 
jQuery 加 加 "Prototype 和 加 加 加 加 加 加 加 Javaseriptd 国 加 加 回回 加 加 JohmResig 四 加 加 2006 和 回回 
Qe eaveas eens OMI 
A eave Se oe 
</div> 
</div> 


应 用 CSS 样式 表 后 ， 网 页 效果 图 如 图 4-4 所 示 。 

按照 需求 ， 需 要 完成 以 下 几 个 步骤 。 [aa | 
(1) 等 待 DOM 装载 完毕 。 04.400000000 

(2) 找到 “标题 ”所 在 的 元 素 ， 绑 定 click 事件 。 

(3) 找到 “内 容 ” 元 素 ， 将 “内 容 ” 元 素 显 示 。 


根据 分 析 的 步 又， 可 以 轻易 地 写 出 如 下 jQuery 代码 : 

















$(function(){ 
$("#panel h5.head").bind("click",function(){ 
$(this).next().show(): Wn sy ae oo a 
)) 
}) 


运行 代码 ， 单 击 “ 标 题 ”链接 , “内 容 ” 就 展开 了 ， 效 果 如 图 4-5 所 示 。 
在 上 面 的 例子 中 ， 为 “标题 ” 绑 定 了 一 个 click 事件 ， 单 击 


jQuery 是 继 Prototype 之 后 又 一 个 优秀 的 标题 链接 后 ， 显示 “ 内 容 
JavaScript 库 ， 它 是 一 个 由 I 
RM Re 与 ready0 方 法 一 样 ，bind0 方 法 也 可 以 多 次 调用 。 
开发 人 员 遍历 HDL 文档 、 操 {FDO 于 处 理事 件 、 
Ed 上 面 jQuery 代码 中 有 一 个 关键 字 this， 与 在 JavaScript 中 的 
EE 作用 一 样 ，this 引用 的 是 携带 相应 行为 的 DOM 元 素 。 为 了 使 该 
045 0000 DOM 元 素 能 够 使 用 jQuery 中 的 方法 ， 可 以 使 用 $ (this) 将 其 


转换 为 jQuery 对 象 (具体 实现 方法 参见 第 1 章 1.4.2 小 入 jQuery 






















































































对 象 和 DOM 对 和 象 的 相互 转换 )。 


200000 

在 上 面 的 例子 中 ， 单 击 “ 标 题 ” 显 示 出 “内 容 ” 再 次 单 击 “ 标 题 ”“ 内 容 ” 并 没有 任何 反应 。 
现在 需要 加 强 效 果 : 第 2 次 单 击 “ 标 题 ”“ 内 容 ” 隐 藏 ， 再 次 单 击 “ 标 题 ”“ 内 容 ” 又 显示 ， 两 个 
动作 循环 出 现 。 为 了 实现 这 个 功能 ， 需 要 经 过 以 下 几 个 步骤 。 







































































040 juery0000000 


(1) 等 待 DOM 装载 完毕 。 


(2) 找到 “标题 ”所 在 的 元 素 ， 绑 定 dlick 事件 。 
































(3) 找到“ 内容” 元素， 如果 “内 容 ”元 素 是 显示 的 ， 则 隐藏 ， 如 果 “ 内 容 ” 元 素 是 隐藏 的 ， 
则 显示 。 

















加 强 效果 的 第 3) 步 需 要 做 判断 ， 原 理 如 下 : 








i 加 加 ”加 这 


























为 了 判断 元 素 是 否 显 示 ， 可 以 使 用 jQuery 中 的 is0 方 法 来 完成 。jQuery 代码 如 下 : 


$(function(){ 
("#panel h5.head").bind("click" ,function(){ 
if($(this).next().is(" :visible")){ //D00O0“00”00 
$(this) .next() hide( 六 
}else{ 
$(this).next().show(); 








} 


}) 
在 代码 中 ， 发 现 $ (this).next 0 被 多 次 使 用 



































六 











此 可 以 为 它 定义 一 个 局 部 变量 : 





四 








var $content = $(this).next();" 
然后 把 局 部 变量 引入 到 代码 中 ， 改 进 后 的 jQuery 代码 如 下 : 


$ 








es 


function(){ 
$("#panel h5.head").bind("click" ,function(){ 
var $content = $(this).next(); 
neonseneels (isle 下 
$content .hide():; 
}else{ 
$content. show(); 





)) 
}) 
通过 以 上 的 修改 ， 可 以 实现 加 强 效果 。 当 反复 地 单 击 “ 标 题 ”链接 时 ,“ 内 容 ” 会 在 隐藏 和 显 
示 两 种 状态 下 切换 。 
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注意 : 当 发 现 相 同 的 选择 器 在 你 的 代码 里 出 现 多 次 时 ， 请 用 变量 把 它 缓存 起 来 。 更 多 jQuery 性 各 
优化 请 参考 附录 。 


CC 





30000000000 


上 面 的 例子 中 ， 给 元 素 绑 定 的 事件 类 型 是 click， 当 用 户 单 击 的 时 候 会 触发 绑 定 的 事件 ， 然 后 
执行 事件 的 函数 代码 。 现 在 把 事件 类 型 换 成 mouseover 和 mouseout， 即 当 光 标 滑 过 的 时 候 ， 就 触发 
事件 。 需 要 进行 以 下 几 步 操作 。 


(1) 等 待 DOM 装载 完毕 。 

(2) 找到 “标题 ”所 在 的 元 素 ， 绑 定 mouseover 事件 。 
(3) 找到 “内 容 ” 元 素 ， 显 示 “ 内 容 ”。 

(4) 找到 “标题 ”所 在 的 元 素 ， 绑 定 mouseout 事件 。 
(5) 找到“ 内容” 元素， 隐藏“ 内容 ”。 

根据 分 析 的 步骤 ， 可 以 写 出 如 下 jQuery 代码 : 





















































$(function(){ 
$("#panel h5.head").bind("mouseover",function(){ 
$(this).next().show(): 
}) .bind("mouseout", function(){ 
$(this).next().hide(): 
De) 
用 


代码 运行 后 ， 当 光标 滑 过 “标题 ”链接 后 ， 相 应 的 “内 容 ” 将 被 显示 ， 如 图 4-6 所 示 。 
当 光 标清 出 “标题 ”链接 后 ， 相 应 的 “内 容 ” 则 被 隐藏 ， 如 图 4-7 所 示 。 











jQuery 是 继 Prototype 之 后 又 一 个 优秀 的 
JavaScript 库 ， 它 是 一 个 由 Johm Resig 创建 
于 2006 年 1 月 的 开源 项 目 。jQuery 任 借 简洁 的 语 
法 和 跨 平 台 的 碌 容 性 ， 极 大 地 简化 了 JavaScript 
开发 人 员 遍 历 HIML 义 档 、 操 作 DO、 处 理事 件 、 
执行 动画 和 开发 &jax。 它 独特 而 又 优雅 的 代码 风 
格 改变 了 Java5cript 程 序 员 的 设计 鼠 路 和 编写 程 


D46 0000 047 0000 
在 上 面 儿 个 例子 中 ， 分 别 用 bind0 方 法 给 “标题 ” 绑 定 了 click 事件 、mouseover 事件 和 mouseout 
事件 ， 绑 定 方法 都 一 样 。 除 此 之 外 ，bind() 方 法 还 能 绑 定 其 他 所 有 的 JavaScript 事件 。 
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40000000 


像 click、mouseover 和 mouseout 这 类 事件 ， 在 程序 中 经 常会 使 用 到 ，jQuery 为 此 也 提供 了 一 
套 简写 的 方法 。 简 写 方法 和 bind0) 方 法 的 使 用 类 似 ， 实 现 的 效果 也 相同 ， 惟 一 的 区 别 是 能 够 减少 代 
但 




































































员 
并 
o 





例如 把 上 面 的 例子 改写 成 使 用 简写 绑 定 事件 的 方式 ， 代 码 如 下 : 


$(function(){ 
$("#panel h5.head").mouseover(function(){ 
$(this).next().show():; 
}) .mouseout (function(){ 
$(this).next().hide(); 
}) 


4.1.3 0O0OD0D 








jQuery 有 两 个 合成 事件 一 一 hover0 方 法 和 toggle0) 方 法 ， 类 似 前 面 讲 过 的 ready0 方 法 ，hover0O 
方法 和 togsgle0 方 法 都 属于 jQuery 自 定义 的 方法 。 











10 hover()D 0 
hover() 方 法 的 语法 结构 为 : 











hover(enter, leave): 


hover() 方 法 用 于 模拟 光标 巧 停 事件 。 当 光标 移动 到 元 素 上 时 ， 会 触发 指定 的 第 1 个 函数 (enter); 
当 光 标 移出 这 个 元 素 时 ， 会 触发 指定 的 第 2 个 函数 (leave)。 


将 上 面 的 例子 改写 成 使 用 hover(0) 方 法 ，jQuery 代码 如 下 : 
























































$(function(){ 
("#panel h5.head").hover(function(){ 
$(this).next().show(); 
},function(){ 
$(this).next().hide(); 








| 
DE 
代码 运行 后 的 效果 与 下 面 代码 运行 后 的 效果 是 一 样 的 。 当 光标 滑 过 “标题 ”链接 时 , 相应 的 “内 
容 ” 将 被 显示 ; 当 光 标 滑 出 “标题 ”链接 后 ， 相 应 的 “内 容 ” 则 被 隐藏 。 

















$(function(){ 
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$("#panel h5.head").mouseover(function(){ 
$(this).next().show(); 
}) .mouseout (function(){ 
$(this).next().hide(): 
}) 
be 





注意 : (1) CSS 中 有 伪 类 选择 符 ， 例 如 “:hover”， 当 用 户 光 标 基 和 停 在 元 素 上 时 ， 会 改变 元 素 的 外 观 .。 
在 大 多 数 符合 规范 的 浏览 器 中 ， 伪 类 选择 符 可 以 用 于 任何 元 素 。 然 而 在 三 6 浏览 器 中 ， 伪 
类 选择 符 仅 可 用 于 超 链 接 元 素 。 对 于 其 他 元 素 ， 可 以 使 用 jQuery 的 hover() 方 法 。 
(2 ) hover0 方 法 准确 来 说 是 替代 jQuery 中 的 bind ("mouseenter") 和 bind ("mouseleave"), 而 不 是 
替代 bind ("mouseover") 和 bind ("mouseout")。 因 此 当 需 要 触发 hover0 方 法 的 第 2 个 函数 时 ， 
需要 用 trigger ("mouseleave") 来 触发 ， 而 不 是 trigger ("mouseout")。 
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toggle0 方 法 的 语法 结构 为 : 








wooggleimle inn 


toggle0 方 法 用 于 模拟 鼠标 连续 单 击 事 件 。 第 1 次 单 击 元 素 ， 触 发 指定 的 第 1 个 函数 (fn1);， 当 再 
次 单 击 同一 元 素 时 ， 则 触发 指定 的 第 2 个 函数 (fn2); 如 果 有 更 多 函数 ， 则 依次 触发 ， 直 到 最 后 一 
个 。 随 后 的 每 次 单 击 都 重复 对 这 几 个 函数 的 轮番 调用 。 


在 前 面 的 加 强 效果 的 例子 中 ， 使 用 了 以 下 jQuery 代码 : 


$(function(){ 

("#panel h5.head").bind("click",function(){ 
Var $content = $(this).next(); 
if($content.is(":visible")){ 

$content .hide():; 
}else{ 
$content. show(); 


























































































































虽然 上 面 的 代码 能 实现 需要 的 效果 ， 但 是 选择 的 方法 并 不 是 最 适合 的 。 如 果 需 要 连续 单 击 “ 标 
























































题 ”链接 ， 来 达到 使 “内 容 ” 隐 藏 和 显示 的 目的 ， 那 么 很 适合 使 用 toggle0 方 法 。 原 理 如 下 : 





$(D 0 ).toggle(function(){ 


yA 
} ,function(){ 





和 站 040 jQuery0000000 


pa 
) 这 
使 用 toggle(0 方 法 来 改写 上 面 的 例子 ，jQuery 代码 如 下 : 




















$(function(){ 
$("#panel h5.head").toggle(function(){ 


$(this).next().show(): 
} ,function(){ 
$(this).next().hide(); 


}) 


站 这 
通过 使 用 toggle0) 方 法 不 仅 实现 了 同样 的 效果 ， 同 时 也 简化 了 代码 。 


方法 在 jQuery 中 还 有 另外 一 个 作用 : 切换 元 素 的 可 见 状态 。 






































如 果 元 素 是 可 见 的 ， 单 击 
































toggle() 
切换 后 则 为 隐藏 ， 如 果 元 素 是 隐藏 的 ， 单 击 切换 后 则 为 可 见 的 。 因 此 上 面 的 代码 还 可 以 写成 如 下 


jQuery 代码 : 





$(function(){ 
$("#panel h5.head").toggle(function(){ 


$(this).next().toggle():; 
} ,function(){ 
$(this).next().toggle():; 
}) 
0 
300000000 
为 了 能 有 更 好 的 用 户 体验 ， 现 在 需要 在 用 户 单 击 “ 标 题 ”链接 后 ， 不 仅 显示 “内 容 ” 而 
显示 “标题 ” 为 了 完成 这 一 功能 ， 首 先 在 CSS 中 定义 一 个 高 亮 的 样式 ，CSS 代码 如 下 : 




















囊 
el 

















wy 







































































.highlight{ background:# FF3300; } 
接 下 来 需要 完成 以 下 几 个 步骤 。 


(1) 等 待 DOM 装载 完毕 。 
上 代表 显示 和 


~， 在 toggle0 方 法 里 定义 两 个 函数 ， 分 另 





(2) 找 到“ 标题” 元素， 添加 toggle() 方 涪 
隐藏 。 


(3) 在 显示 函数 里 ， 给 “标题 ”添加 高 亮 class。 


























(4) 在 隐藏 函数 里 ， 移 除 “ 标 题 ” 的 高 亮 class。 


然后 编写 如 下 jQuery 代码 : 
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$(function(){ 
$("#panel h5.head").toggle(function(){ 
sehnso add lass ela yoga giao 
$(this).next().show(): 
},function(){ 
$(this).removeClass("highlight"); sa a i 
$(this).next().hide(): 


js 








行 代码 后 ， 如 果 “ 内 容 ” 是 显示 的 ,“ 标 题 ” 则 会 高 之 显示 ; 如 果 “ 内 容 ” 是 隐藏 的 ， 则 不 
显示 “新 闻 标 题 ” 显示 如 图 4-8 和 图 4-9 所 示 效 果 。 

















iQuery 是 维 Prototype 之 后 又 一 个 优秀 的 
JavaScript 库 ， 它 是 一 个 由 John Resig 创建 
于 2006 年 1 月 的 开源 项 目 。jRuery 任 借 简 洁 的 语 


法 和 路 平台 的 兼容 性 ， 极 大 地 简化 了 JavaScript 
开发 人 员 和 遍历 HI 有 LL 义 档 、 操 作 DOR、 处 理 汪 件 、 

执行 动画 和 开发 Ajax。 它 独特 而 又 优 鸦 的 代码 风 
格 改变 了 Java5cript 程 序 员 的 设计 思路 和 编写 程 





D048 00000000 D049 U00000000 


4.1.4 00D00 


1000000 


在 页 面 上 可 以 有 多 个 事件 ， 也 可 以 多 个 元 素 响应 同一 个 事件 。 假 设 网 页 上 有 两 个 元 素 ， 其 中 一 
个 元 素 共 套 在 另 一 个 元 素 里 ， 并 且 都 被 绑 定 了 click 事件 ， 同 时 <body> 元 素 上 也 绑 定 了 click 事件 。 
完整 代码 如 下 : 



















































































<script type="text/javascript"> 
$(function(){ 
Wispan eed 
spam Monmae elnek ionesn om 
var txt = $('#msg').html() + "<p>0 0 span0DDDD .<p/>": 
$('#msg' ) .html (txt):; 
DE. 
Ve re so 
$('#content').bind("click",function(){ 
Var Ee = (Cn in < 0 a a | 
$('#msg' ).html (txt):; 
| 
woe ek 
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sody onnae ee fvnewiom 


a de 


var txt = $('#msg').html() + "<p>body DO O00 .<p/>"; 


$('#msg' ).html (txt): 
和 

}) 

/Ss 

<div id="content"> 
00 div00 
<span>0 0 span0 0 </span> 
00 div00 

</div> 

<div id="msg"></div> 


页 面 初始 化 效果 如 图 4-10 所 示 。 




















当 单 击 内 部 <span> 元 素 ， 即 触发 <span> 元 素 的 click 事件 时 ， 会 输 


这 就 是 由 事件 冒 泡 引起 的 。 











04:10 00000 
在 单 击 <span> 元 素 的 同时 ， 也 单 击 了 包含 <span> 元 素 目 














元 素 的 click 事件 会 按照 以 下 顺序 “ 冒 泡 ”。 





(1) <span> 。 
(2) <div>。 


(3) <body> 。 


之 所 以 称 为 冒 泡 ， 是 因为 事件 会 按照 DOM 的 层次 结构 像 水 泡 一 








样 不 断 向 上 直至 顶端 ， 如 图 4-12 所 示 。 
20000000000 





事件 冒 泡 可 能 会 引起 预料 之 外 的 效果 。 上 例 中 ， 本 来 只 想 角 








3 条 记录 ， 如 图 4-11 所 示 。 





i 

















D411 000000 


的 元 素 <div> 和 包含 <div> 元 素 的 元 素 
<body>， 并 且 每 一 个 元 素 都 会 按照 特定 的 顺序 响应 click 事件 


04:12 0000 


发 <span> 元 素 的 click 事件 ， 然 而 











<div> 元 素 和 <body> 元 素 的 click 事件 也 同时 被 触发 了 。 因 此 ， 有 必要 对 事件 的 作用 范围 进行 限制 。 
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当 单 击 <span> 元 素 时 ， 只 触发 <span> 元 素 的 click 事件 ， 而 不 触发 <div> 元 素 和 <body> 元 素 的 click 习 
件 ; 当 单 击 <div> 元 素 时 ， 只 触发 <div> 元 素 的 click 事件 ， 而 不 触发 <body> 元 素 的 click 事件 。 为 了 








解决 这 些 问 题 ， 介 绍 以 下 内 容 。 
加 事件 对 象 








由 于 正 -DOM 和 标准 DOM 实现 事件 对 象 的 方法 各 不 相同 ， 导 致 在 不 同 浏览 占 中 丈 

















恬 








Wiha 


tt 








Se 象 


























变 得 比较 困难 。 针 对 这 个 问题 ， jQuery 进行 了 必要 的 扩展 和 封装 ， 从 而 使 得 在 任何 浏览 器 中 都 能 很 





轻松 地 获取 事件 对 象 以 及 事件 对 象 的 一 些 属性 。 
在 程序 中 使 用 事件 对 象 非 常 简 单 ， 只 需要 为 函数 添加 一 个 参数 ，jQuery 代码 如 下 : 
































$("element").bind("click",function(event){ //event:0DDD 
We 
Ds 
这 样 ， 当 单 击 “element” 元 素 时 ， 事 件 对 象 就 被 创建 了 。 这 个 事件 对 象 只 有 事 伯 




















< 














-一 


能 访问 到 。 事 件 处 理 函 数 执行 完毕 后 ， 事 件 对 象 就 被 销毁 


加 ”停止 事件 冒 泡 
































处理 函 数 才 




















停止 事件 冒 泡 可 以 阻止 事件 中 其 他 对 象 的 事件 处 理 函 数 被 执行 。 在 jQuery 中 提供 了 

















stopPropagation() 方 法 来 停止 事件 冒 泡 。 


jQuery 代码 如 下 : 











$('span').bind("click",function(event){ //event : 0000 
Va Ext EH neo ems < 
$('#msg').html (txt): 



































event .stopPropagation(): 训 加 回回 加 加 加 
be 
当 单 击 <span> 元 素 时 ， 只 会 触发 <span> 元 素 上 的 click 事 
元 素 的 click 事件 。 
可 以 用 同样 的 方法 解决 <div> 元 素 上 的 冒 泡 问题 。 
jQuery 代码 如 下 : 


$('#content').bind("click", function(event){ //event : 000O0 
Va Am em 
$('#msg' ).html (txt); 
event .stoppropagation(): VO al 


这 样 ， 当 单 击 <span> 元 素 或 者 <div> 元 素 时 ， 就 只 会 输出 相应 的 内 容 ， 而 不 会 输 








件 ， 而 不 会 触发 <div> 元 素 和 <body> 











其 他 的 内 容 ， 











ET 




















效果 如 图 4-13 所 示 。 


加 ”阻止 默认 行为 

















网 页 中 的 元 素 有 上 自己 默认 的 行为 ， 例 如 ， 单 击 超 链 接 后 会 跳 转 、 





内 层 span 元 素 


内 层 span 元 素 被 点 击 . 


























单 击 “ 提 交 ” 按 钮 后 表单 会 提交 ， 有 了 时 需要 阻止 元 素 的 默认 行为 。 


04:13 00 span0 





























在 jQuery 中 ， 提 供 了 preventDefault0 方 法 来 阻止 元 素 的 默认 行为 。 























举 一 个 例子 ， 在 项 目 中 ， 经 常 需要 验证 表单 ， 在 利 























地 


民品 


























0D0 


) 


击 “ 提 交 ” 按 钮 时 ， 验 证 表单 内 容 ， 例 如 茶 


元 素 是 否 是 必 填 字段 ， 某 元 素 长 度 是 否 够 6 位 等 ， 当 表单 不 符合 提交 条 件 时 ， 要 阻止 表单 的 提交 〈 默 
认 行 为 )。 
代码 如 下 : 
<script type="text/javascript"> 
$(function(){ 
$("#sub").bind("click", function(event){ 
var username = $("#username").val(): 一 轩 加 加 加 
if(username==""){ ya Iain 
$0" meg ) mom soa /000 
event .preventDefault(); 区 时 加 加 加 加 加 
} 
| 让 
}) 
</script> 


<form action="test.html"> 


0000<input type="text" id="username” /> 
<input type="submit" value="0 0 " id="sub"/> 


</form> 
<div id="msg"></div> 


当 用 户 名 为 空 时 ， 单 击 “ 提 交 ” 按 钮 ， 会 出 现 图 4-14 所 示 的 提示 ， 并 且 表 单 不 能 提交 。 只 有 在 





用 户 名 : 
文本 杠 的 全 不 能 为 定 . 


0 414 000000 











在 表单 的 例子 中 ， 可 以 把 





全 已 
HEM 








且 目 表单 的 提交 行为 。 





如 有 果 想 同时 对 事件 对 象 停止 冒 泡 和 默认 行为 ， 可 以 在 事 作 








处 到 


用 户 名 里 输入 内 容 后 ， 才 能 提交 表单 。 可 见 ，prevent Default() 方 法 





函 








数 品 


Eevee oe ee 


改写 为 : 


返回 false。 这 是 对 在 事件 对 象 上 同时 调用 stopPrapagation0 方 法 
和 preventDefault0 方 法 的 一 种 简写 方式 。 
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112 


return false: 


也 可 以 把 事件 冒 泡 例子 中 的 























event .stopPropagation() : 


改写 为 : 


/000000 


return false: 


日 ”事件 捕获 






























































































































































事件 捕获 和 事件 冒 泡 是 刚好 相反 的 两 个 过 程 ， 事 件 捕获 是 从 最 顶端 往 下 开始 触发 。 
还 是 冒 泡 事件 的 例子 ， 其 中 元 素 的 click 事件 会 按照 以 下 顺序 捕获 。 
(1) <body>。 rn 
(2) <div>。 | 
(3) <span>。 pe 事件 捕获 过 程 | 
很 显然 , 事件 捕获 是 从 最 外 层 元 素 开始 , 然后 再 到 最 里 层 元 素 。 | 
因此 绑 定 的 click 事件 ， 首 先 会 传递 给 <body> 元 素 ， 然 后 传递 给 
<div> 元 素 ， 最 后 才 传 递 给 <span> 元 素 。 spam 
遗憾 的 是 ， 并 非 所 有 主流 浏览 器 都 支持 事件 捕获 ， 并 且 这 个 缺陷 U9 Tn 
无 法 通过 JavaScript 来 修复 。jQuery 不 支持 事件 捕获 ， 如 果 读 者 需要 使 用 事件 捕获 ， 请 直接 使 用 原生 的 





JavaScript。 
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jQuery 在 遵循 W3C 规范 的 情况 下 ， 对 事件 对 象 的 常 
浏览 器 下 都 可 以 正常 运行 而 不 需要 进行 浏览 器 类 型 判断 。 


























(1) event.type 
该 方法 的 作用 是 可 以 获取 到 事件 的 类 型 。 








$("a").click(function(event) { 
alert(event.type)://0D0O0D0O0O 
Peturn false;// 卓 口 口 吕 000O 

be 


以 上 代码 运行 后 











el 









































] 属 性 进行 了 封装 ， 使 得 事 伯 








[处理 在 各 大 
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(2) event.preventDefault0) 方 法 








在 本 章 第 4.1.4 小 节 事 件 冒 泡 中 己 经 介绍 过 该 方法 ， 该 方法 的 作用 是 阻止 默认 的 事件 行为 。 
JavaScript 中 符合 W3C 规范 的 preventDefault0 方 法 在 正 浏览 器 中 却 无 效 。jQuery 对 其 进行 了 封 
装 ， 使 之 能 兼容 各 种 浏览 


























(3) event.stopPropagation() 方 法 
在 本 章 第 4.1.4 小 节 事 件 冒 泡 中 已 经 介绍 过 该 方法 ,该 方法 的 作用 是 阻止 事件 的 冒 泡 。JavaScript 


中 符合 W3C 规范 的 stopPropagation() 方 法 在 正 浏览 器 中 却 无 效 。jQuery 对 其 进行 了 封装 ， 使 之 
能 兼容 各 种 浏览 器 。 




































































(4) event.target 




















event.target 的 作用 是 获取 到 触发 事件 的 元 素 。jQuery 对 其 封装 后 ， 避 免 了 各 个 浏览 器 不 同 标准 
的 差异 。 


$("a[lhref='http://google.com']").click(function(event) { 


var tg = event.target: VO 
allert (onhner 
return false: a Ma] 


es 
以 上 代码 运行 后 会 输出 : 











"http://go0gle.com" 


(5) event.relatedTarget 








在 标准 DOM 中 ，mouseover 和 mouseout 所 发 生 的 元 素 可 以 通过 event.target 来 访问 ， 相 关 元 素 是 
通过 event.relatedTarget 来 访问 的 。event.relatedTarget 在 mouseover 中 相当 于 正 浏览 器 的 
event.fromElement， 在 mouseout 中 相当 于 正 浏览 器 的 event.toElement， jQuery 对 其 进行 了 封装 ,使 之 
能 兼容 各 种 浏览 器 。 





















































(6) event.pageX 和 event.pageY 


























该 方法 的 作用 是 获取 到 光标 相对 于 页 面 的 x 坐标 和 >y 坐标 。 如 果 没 有 使 用 jQuery 时 ， 那 么 更 
浏览 器 中 是 用 eventxyeventy， 而 在 Firefox 浏览 器 中 是 用 eventpageXVeventpageY。 如 果 页 面 上 有 滚动 
条 ， 则 还 要 加 上 滚动 条 的 宽度 或 高 度 。 







































































$("a").click(function(event) { 
共和 轩 加 
alert("Current mouse position: ”+ event.pageX + ", " + event.pageY ): 
pebuneials es 

es 
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(7) event.which 


是 在 鼠标 单 击 事件 中 获取 到 鼠标 的 左 、 中 、 右键 ; 在 键盘 弹 
、 矿 键 : 





该 方法 的 作用 
比如 ， 获 取 鼠 标的 左 、 

















F 中 获取 键盘 的 按键 。 








| 
由 
全 





























$("a").mousedown(function(e){ 
alert(e.which)y /1=0000:2=0000:3=0000 





)) 
以 上 代码 加 载 到 页 面 后 ， 用 鼠标 单 击 页 面 时 ， 单 击 左 、 中 、 右 键 分 别 返回 1、2、3。 


比如 ， 获 取 键 盘 的 按键 : 





















































$("input").keyup(function(e){ 
alert(e.which) : 


}) 
(8) event.metaKey 


针对 不 同 浏览 器 对 键盘 中 的 <ctrl> 按 键 解 释 不 同 ，jQuery 也 进行 了 封装 ， 并 规定 event.metaKey 
为 键盘 事件 中 获取 <ctrl> 按 键 。 








注意 : 更 多 的 event 的 属性 和 方法 可 以 访问 : http://docs.jquery.com/Events/jQuery.Event 




































































4.1.6 DUO0OD0D 
在 绑 定 事件 的 过 程 中 , 不 仅 可 以 为 同一 个 元 素 绑 定 多 个 事件 , 也 可 以 为 多 个 元 素 绑 定 同一 个 事 
件 。 假 设 网 页 上 有 一 个 <button> 元 素 ， 使 用 以 下 代码 为 该 元 素 绑 定 多 个 相同 的 事件 。 
<SCnipt> 
$(function(){ 
$('#btn').bind("click", function(){ 
$('#test').append("<p>0 0 0000 1</p>"): 
onabind( eek unction( 
$('#test').append("<p>0O0OO0OOD 2</p>"); 
hoe unetnon 
$('#test' ).append("<p>0OOOOD 3</p>"); 
De 
DE 
Sep 


<button id="btn">0 0 0 </button> 
<div id="test"></div> 
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040 jaouey0000000 











当 单 击 按钮 后 ， 会 出 现 图 4-16 所 示 的 效果 。 
i000000000000000 
首先 在 网 页 上 添加 一 个 移 除 事件 的 按钮 。 
<button id="delAl1">0 O00O00 0 </button> 

然后 为 按钮 绑 定 一 个 事件 ，jQuery 代码 如 下 : 


$('#delAll').click(function(){ 
Wo 
) 






















































































D0416 00300000 


最 后 需要 为 该 事件 编写 处 理 函 数 用 于 删除 元 素 的 所 有 click 事件 ，jQuery 代码 如 下 : 


$('#delAll').click(function(){ 
$('#btn').unbind("click"); 
bp 











因为 元 素 绑 定 的 都 是 click 事件 ， 所 以 不 写 参数 也 可 以 达到 同样 的 目的 ，jQuery 代码 如 下 : 

















$('#delAl1').click(function(){ 
$('#btn' ) .unbind(); 
Ds 


下 面 来 看 看 unbind0 方 法 的 语法 结构 : 
unbind([type], [data]); 

第 1 个 参数 是 事件 类 型 ， 第 2 个 参数 是 将 要 移 除 的 函数 ， 具 体 说 明 如 下 。 
(1) 如 果 没 有 参数 ， 则 删除 所 有 绑 定 的 事件 。 

(2) 如 果 提 供 了 事件 类 型 作为 参数 ， 则 只 删除 该 类 型 的 绑 定 事件 。 













































































《3) 如 果 把 在 绑 定 时 传递 的 处 理 函 数 作为 第 2 个 参数 ， 则 只 有 这 个 特定 的 事 人 








2000<button>-j00000000 
首先 需要 为 这 些 匿名 处 理 函 数 指定 一 个 变量 。 
| 如 下 面 的 jQuery 代码 : 
































人 


$(function(){ 
$('#btn').bind("click", myFunl = function(){ 
$('#test').append("<p>0D 0 000D0 1</p>"): 
}).bind("click", myFun2 = function(){ 




















处 到 


E 疯 数 会 被 删除 。 
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$('#test').append("<p>0 0 O00D 2</p>"):; 
}).bind("click", myFun3 = function(){ 
$('#test').append("<p>0 OO O00 3</p>"); 
js 
be 
然后 就 可 以 单独 删除 某 一 个 事件 了 ，jQuery 代码 如 下 : 
$('#delTwo').click(function(){ 
sr "4bon yana Cli oe A 
1 


当 单 击 “ 删 除 第 二 个 事件 ”按钮 后 ， 青 次 单 击 “ 点 击 我 ”按钮 ， 显 示 图 4-17 所 示 的 效果 。 

另外 ， 对 于 只 需要 触发 一 次 ， 随 后 就 要 立即 解除 绑 定 的 情况 ， 
jQuery 提供 了 一 种 简写 方法 one() 方 法 。One(0 方 法 可 以 为 元 素 绑 
定 处 理 函 数 。 当 处 理 函 数 触 发 一 次 后 ， 立 即 被 删除 。 即 在 每 个 对 象 
上 ， 事 件 处 理 函 数 只 会 被 执行 一 次 。 

One0 方 法 的 结构 与 bind0 方 法 类 似 ， 使 用 方法 也 与 bind0 方 法 
相同 ， 其 语法 结构 如 下 : 
























































CC 







































































D0417 U200000000 








one( type, [datal, fn ); 
示例 代码 如 下 : 


<script type="text/javascript"> 
$(function(){ 
$('#btn').one("click", function(){ 
$('#test').append("<p>0 OOOOD 1</p>"): 
}).one("click", function(){ 
$('#test').append("<p>0D OD O00D0 2</p>"): 
}).one("click", function(){ 
$('#test').append("<p>0 0 O000 3</p>"): 








i: 
人 
</SepipEe> 
<button id="btn">0 0 0 </button> 
<div id="test"></div> 


使 用 one(0 方 法 为 <button> 元 素 绑 定单 击 事件 后 ,只 在 用 户 第 1 次 单 击 按钮 时 , 处 理 函 数 才 执行 ， 
之 后 的 单 击 毫 无 作用 。 












































注意 : jQuery 1.7 版 本 中 新 增 了 on()，off()，delegate() 和 undelegate0 事 件 绑 定 。 有 具体 介绍 可 以 参考 
第 十 章 。 


洗 
另 
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4.1.7 0000 


100000 
以 上 的 例子 都 是 用 户 必须 通过 单 击 按钮 ， 才 能 触发 click 事件 ， 但 是 有 时 ， 需 要 通过 模拟 用 户 操 
作 ， 来 达到 单 击 的 效果 。 例 如 在 用 户 进入 页 面 后 ， 就 触发 click 事件 ， 而 不 需要 用 户 去 主动 单 击 。 
在 jQuery 中 ， 可 以 使 用 trigger0 方 法 完成 模拟 操作 。 例 如 可 以 使 用 下 面 的 代码 来 触发 id 为 btn 
的 按钮 的 click 事件 。 




































































































































































ooo a eee Ce ee 
这 样 ， 当 页 面 装载 完毕 后 ， 就 会 立刻 输出 想 要 的 效果 ， 如 图 4-18 所 示 。 上 DEL 


也 可 以 直接 用 简化 写法 click0， 来 达到 同样 的 效果 : 




















我 的 绪 定 函数 2 
我 的 乡 定 国 数 3 


0418 0000 











$('#btn').click() 

200000000 

trigger( 方 法 不 仅 能 触发 浏览 器 支持 的 具有 相同 名 称 的 事件 ， 也 可 以 触发 自 定义 名 称 的 事件 。 
例如 为 元 素 绑 定 一 个 “myClick” 的 事件 ，jQuery 代码 如 下 : 
































$('#btn').bind("myClick", function(){ 
('#test').append("<p>0 O00000 .</p>"); 
pe 


想 要 触发 这 个 事件 ， 可 以 使 用 以 下 代码 来 实现 : 











Sn re el rele ys 
实现 效果 如 图 4-19 所 示 。 


300000 

trigger(type,[data]) 方 法 有 两 个 参数 ， 第 1 个 参数 是 要 触发 的 事件 类 型 ， 第 2 个 参数 是 要 传递 给 
事件 处 理 函 数 的 附加 数据 ， 以 数组 形式 传递 。 通常 可 以 通过 传递 一 个 参数 给 回调 函数 来 区 别 这 次 事 
件 是 代码 触发 的 还 是 用 户 触发 的 。 

下 面 是 一 个 传递 数据 的 例子 。 


$('#btn').bind("myClick", function(event, messagel, message2){ wa a alg 
$('#test').append( "<p>"+messagel + message2 +"</p>"); 


全 
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SCD ee /000000 
点 击 我 点 击 我 
我 的 自 定义 事件 . 
D419 0000000 D4-20 0000 
40000000 








trigger() 方 法 触发 事件 后 ， 会 执行 浏览 器 默认 操作 。 例 如 : 
$("input").trigger("focus"); 


以 上 代码 不 仅 会 触发 为 <sinput> 元 素 绑 定 的 focus 事件 ， 也 会 使 <input> 元 素 本 身 得 到 焦点 (这 是 
浏览 器 的 默认 操作 )。 


如 果 只 想 触 发 绑 定 的 focus 事件 ， 而 不想 执行 浏览 器 默认 操作 ， 可 以 使 用 jQuery 中 男 一 个 类 似 
的 方法 一 一 triggerHandler() 方 法 。 





























$("input").triggerHandler("focus") 


该 方法 会 触发 sinput> 元 素 上 绑 定 的 特定 事件 ， 同 时 取消 浏览 器 对 此 事件 的 默认 操作 ， 即 文本 
框 只 触发 绑 定 的 focus 事件 ， 不 会 得 到 焦点 。 














4.1.8 0000 


























前 面 已 经 对 bind0 方 法 进行 了 介绍 , bind0) 方 法 不 仅 能 为 元 素 绑 定 浏览 
的 事件 ， 也 可 以 绑 定 自 定 义 事件 。 不 仅 如 此 ，bind0) 方 法 还 能 做 很 多 的 事情 。 


1000000000 
例如 可 以 为 元 素 一 次 性 绑 定 多 个 事件 类 型 。jQuery 代码 如 下 : 


3 
莫 
全 
< 
去 
本 


有 相同 名 称 



































$(function(){ 
$("div").bind("mouseover mouseout"”, function(){ 
$(this).toggleClass("over"); 
网 
be 


当 光 标 滑 入 <div> 元 素 时 ， 该 元 素 的 class 切换 为 “over”， 当 光标 滑 出 <div> 元 素 时 ，class 切换 
为 先前 的 值 。 这 段 代 人 码 等 同 于 下 面 的 代码 : 


$(function(){ 
$("div").bind("mouseover", function(){ 








$(this).toggleClass("over") 
}).bind("mouseout", function(){ 


040 joueryU0000000 


$(this).toggleClass("over"): 











很 显然 ， 第 1 种 方式 能 减少 代码 量 ， 这 就 是 jQuery 提倡 的 “write less,do more”( 写 得 更 少 ， 





























20000000000001 
例如 可 以 把 为 元 素 绑 定 的 多 个 事件 类 型 用 命名 空间 规范 起 来 ，jQuery 代码 如 下 : 






































一 























$(function(){ 
Stave ela el er oe ne 
$("body").append("<p>click DD 0 </p>"): 





("div").bind("mouseover.plugin", function(){ 
$("body" ).append("<p>mouseover [| 0 </p>"):; 





(di Ne bina lle nek ne on 
$("body" ).append("<p>dblclick 0 </p>"); 





pa: 

("button").click(function() { 
So nn en 

po 





ys 


在 所 绑 定 的 事件 类 型 后 面 添加 命名 空间 ， 这 样 在 删除 事件 时 上 只 需 要 指定 命名 空间 即 可 。 单 击 
<button> 元 素 后 ,“plugin” 的 命名 空间 被 删除 ， 而 不 在 “plugin” 的 命名 空间 的 “dblclick” 事 件 依然 
存在 。 


删除 多 个 事件 代码 也 可 以 写 为 以 下 链 式 代 码 ， 但 显然 上 面 的 方式 写 得 更 少 。 




































































$("div").unbind("click").unbind( "mouseover"): 

















300D0D0 吓 呈 上 0 
例如 可 以 为 元 素 绑 定 相同 的 事件 类 型 ， 然 后 以 命名 空间 的 不 同 按 需 调用 ，jQuery 代码 如 下 : 













































































$(function(){ 
sire eile ek ef vn 
$("body").append("<p>click DO 0 </p>"); 
5 
sa vid lek ee meron 
$("body").append("<p>click.plugin0 0 </p>"):; 
[DB 
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120 


$("button").click(function() { 
SOO). er en i 
De) 
be 


当 单 击 <div> 元 素 后 ， 会 同时 触发 click 事件 和 click.plugin 事件 。 如 果 只 是 单 击 <button> 元 素 ， 
则 只 触发 click 事件 ， 而 不 触发 click.plugin 事件 。 注 意 ，trigger("click!") 后 面 的 感叹 号 的 作用 是 匹 
配 所 有 不 包含 在 命名 空间 中 的 click 方法 。 


如 果 需 要 两 者 都 被 触发 ， 改 为 如 下 代码 即 可 : 
SO ra ee ye A a a od 


到 此 ，jQuery 中 的 事件 已 经 介绍 完了 。 下 面 将 介绍 jQuery 中 的 动画 。 


已 ea 0000 


动画 效果 也 是 jQuery 库 吸 引 人 的 地 方 。 通 过 jQuery 的 动画 方法 ， 能 够 轻松 地 为 网 页 添加 非常 
精彩 的 视觉 效果 ， 给 用 户 一 种 全 新 的 体验 。 
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| 































































































4.2.1 show(OD 0 0 hideOU 0 


10 show()0 0 0 hide()0 OO 


show(0 方 法 和 hide0 方 法 是 jQuery 中 最 基本 的 动画 方法 。 在 HTML 文档 里 ， 为 一 个 元 素 调用 
hide0) 方 法 ， 会 将 该 元 素 的 display 样式 改 为 “none”。 


例如 ， 使 用 如 下 代码 隐藏 element 元 素 。 
$("element").hide(): /AO hideO)0OO00OOOO 


这 段 代 码 的 功能 与 用 css0 方 法 设置 display 属性 效果 相同 : 




























































































$("element").css("display", "none"); ool ol ss oo ono a 


当 把 元 素 隐藏 后 ， 可 以 使 用 show0 方 法 将 元 素 的 display 样式 设置 为 先前 的 显示 状态 (“block” 
或 “inline” 或 其 他 除了 “none” 之 外 的 值 )。 


jQuery 代码 如 下 : 


























$("element").show(): 


在 前 面 的 例子 中 ， 已 经 多 次 使 用 hide0 方 法 和 show0 方 法 ， 通 过 这 两 种 方法 可 以 控制 “内 容 ” 
的 显示 和 隐藏 。 



































jQuery 代码 如 下 : 


$(function(){ 
$("#panel h5.head").toggle(function(){ 
$(this).next().hide(); 
},function(){ 
$(this).next().show(); 
| 
J 


注意 hide0 方 法 在 将 “内 容 ” 的 display 属性 值 设置 为 “none” 之 前 ， 会 记 住 原先 的 display 属 
性 值 (“block” 或 “inline” 或 其 他 除了 “none” 之 外 的 值 )。 当 调用 show0 方 法 时 ， 就 会 根据 hideO 












































方法 记 住 的 display 属性 值 来 显示 元 素 。 








在 本 例 中 ,“ 内 容 ” 的 display 属性 的 值 是 “block”， 当 单 击 “标题 ”链接 执行 hide() 方 法 的 时 
候 ，hide0 方 法 会 做 两 步 动 作 ， 首 先 会 记 住 “内 容 ” 的 display 属性 的 值 “block” 然后 把 display 




















性 的 值 设置 为 “none”。 
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在 Firebug 工具 中 DOM 结构 显示 效果 如 图 4-21 所 示 。 








当 执 行 show0 方 法 的 时 候 ,“ 内 容 ” 的 display 


























在 Firebug 工具 中 DOM 结构 显示 效果 如 图 














属性 的 值 就 会 被 还 原 为 调用 hide0) 方 法 前 的 状态 。 


4-22 所 示 。 





日 <html zmlns="http://wow. we. ore/1999/zhtml”> 
由 《head> 
BB ‘bodr> 
EE div 1d= panel”> 
Xh5 cla>>-"hesd"> 新 闻 标 十 XJ.5> 


divy 
<fbodr> 
html> 











日 htnl zmlns="http:/ /we wi.ore/1999/zhtnl "> 
田 <head> 
BB ‘odr> 
日 《div it"panel”> 
《<h5 class=“head"》 新 闻 标 赴 </h5> 






ss= content” st7rle= | > 新 
内容 新闻 上 内容 新 闻 上 内容 新 闻 上 内容 新 问 内容 新 闻 内 让 
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注意 : 用 jQuery 做 动画 效果 要 求 要 在 标准 模式 下 ， 否 则 可 能 会 引起 动画 拌 动 。 标 准 模式 即 要 求 广 


件 头 部 包含 如 下 的 DTD 定义 : 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll1-transitional.dtd"> 





20 show()DDD hided0 D000000 














show(0) 方 法 和 hide() 方 法 在 不 带 任何 参数 的 情况 下 ， 相 当 于 css("display","none/ block/inline")， 





作用 是 立即 隐藏 或 显示 匹配 的 元 素 ， 不 会 有 人 














让 思 


人 码 如 下 : 




















F 何 动画 。 如 果 希 望 在 调用 show0 方 法 时 ， 元素 慢 慢 地 
显示 出 来 ， 可 以 为 show0 方 法 指定 一 个 速度 参数 ， 例 如 ， 指 定 一 个 速度 关键 字 “slow”。jQuery 代 





0U00Ujouery00 200 


$("element").show("slow"):; 








运行 该 代码 后 ， 元 素 将 在 600 毫秒 内 慢 慢 地 显示 出 来 。 其 他 的 速度 关键 字 还 有 “normal” 和 
“fast”( 长 度 分 别 是 400 毫秒 和 200 毫秒 )。 

















不 仅 如 此 ， 还 可 以 为 显示 速度 指定 一 个 数字 ， 单 位 是 毫秒 。 


例如 ， 使 用 如 下 代码 使 元 素 在 1 秒 钟 (1000 毫秒 ) 内 显示 出 来 : 








$("element").show(1000):; 
类 似 的 ， 以 下 代码 将 使 元 素 在 1 秒 钟 (1000 毫秒 ) 内 隐藏 ; 


$("element").hide(1000); 














在 前 面 的 例子 中 ， 把 其 中 的 hide0 方 法 改 为 hide(600)，show0 方 法 改 为 show(600)。 
jQuery 代码 如 下 : 








$("#panel h5.head").toggle(function(){ 
$(this).next().hide(600); 

} ,function(){ 
$(this).next().show(600); 

) 


运行 该 代码 后 ， 当 单 击 “ 标 题 ” 链 接 时 , “内容 ”已 经 产生 动画 了 。 效 果 如 图 4-23 所 示 。 


从 代码 执行 过 程 中 ， 可 以 发 现 ，hide(600) 方 法 会 同时 
减少 “内 容 ” 的 高 度 、 宽 度 和 不 透明 度 ， 直 至 这 3 个 属性 










































































本 a ， 新 闻 内 容 新 闻 内 容 新 闻 内 容 新 闻 
的 值 都 为 0， 最 后 设置 该 元 素 的 CSS 规则 为 “display:none”。 ”| 内 容 新 闻 内 容 新 闻 内 容 新 闻 内 容 新 闻 











同 理 ，show(600) 方 法 则 会 从 上 到 下 增 大 “内 容 ” 的 高 度 ， 
从 左 到 右 增 大 “内 容 ” 的 宽度 ， 同 时 增加 “内 容 ” 的 不 透 
明度 ， 直 至 新 闻 内 容 完 全 显示 。 


0 4-23 hide(600)0D D000000 
































4.2.2 fadeln(|0D 0 0 fadeOut()D 0 











与 show0 方 法 不 相同 的 是 ，fadeIn0 方 法 和 fadeOut0) 方 法 只 改变 元 素 的 不 透明 度 。fadeOut0 方 法 会 
在 指定 的 一 段 时 间 内 降低 元 素 的 不 透明 度 ， 直 到 元 素 完全 消失 (“display: none”)。fadeIn() 方 法 则 相反 。 


在 上 个 例子 中 ， 如 果 只 想 改 变 “ 内 容 ” 的 不 透明 度 ， 就 可 以 使 用 fadeOut( 方 法 。 
jQuery 代码 如 下 : 





















































$("#panel h5.head").toggle(function(){ 
$(this).next().fadeOut(); 


0 40 jQuery0000000 


},function(){ 
$(this).next().fadeIn():; 
人 


当 第 1 次 单 击 “ 标 题 ” 链 接 后 ,“ 内 容 ” 慢 慢 地 消失 了 “淡出 )， 当 再 次 单 击 “ 标 题 ” 链 接 后 ， 
“内 容 ” 又 慢 慢 地 显示 了 ( 淡 入 )， 效 果 如 图 4-24 所 示 。 
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4.2.3 slideUp00 0 0 slideDown(0 口 


ed er slideDown() 方 法 只 会 改变 元 素 的 高 度 。 如 果 一 个 元 素 的 display 属性 值 为 
“none”， 当 调用 slideDown0 方 法 时 ， 这 个 元 素 将 由 上 至 下 延伸 显示 。slideUp0 方 法 正好 相反 ， 元 素 
将 由 下 到 上 缩短 隐藏 。 使 用 slideUp0 方 法 和 slideDown() 方 法 再 次 对 “内 容 ” 的 显示 和 隐藏 方式 进 
行 改变 ， 代 人 码 如 下 : 










































































$("#panel h5.head") .toggle(function(){ 
$(this).next().slideyp(); 

} ,function(){ 
$Cthis) .next().S1ideDown() 

有 


实现 效果 如 图 4-25 所 示 。 





部 关内 窜 划 癌 内 在 者 闻 内 窜 渐 交 内 看 首 站 


0 4. 25 “00， nooooooa 





: jQuery 中 的 任何 动画 效果 ， 都 可 以 指定 3 种 速度 参数 ， 即 “slow”、“normal” 和 “fast”( 时 
间 长 度 分 别 是 0.6 秒 、0.4 秒 和 0.2 秒 )。 当 使 用 速度 关键 字 时 要 加 引号 ， 例 如 show("slow")， 
如 果 用 数字 作为 时 间 参 数 时 就 不 需要 加 引号 ， 例 如 show(1000)。 





4.2.4 0UDUD0ODO00D0 animate() 


前 面 已 经 讲 了 3 种 类 型 的 动画 。 其 中 show0 方 法 和 hide0 方 法 会 同时 修改 元 素 的 多 个 样式 属性 ， 
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即 高 度 、 宽 度 和 不 透明 度 ; fadeOut() 方 法 和 fadeIn0 方 法 只 会 修改 元 素 的 不 透明 度 ;， slideDown0 方 
法 和 slideUp() 方 法 只 会 改变 元 素 的 高 度 。 

很 多 情况 下 ,这 些 方法 无 法 满足 用 户 的 各 种 需求 ,那么 就 需要 对 动画 有 更 多 的 控制 ,需要 采取 
一 些 高 级 的 自 定义 动画 来 解决 这 些 问题 。 在 jQuery 中 ， 可 以 使 用 animate() 方 法 来 日 定义 动画 。 其 
语法 结构 为 : 












































animate(params, speed , callback); 


参数 说 明 如 下 。 
(1) params: 一 个 包含 样式 属性 及 值 的 映射， 比如 {property1:“valuel”，property2: “value2”,...}。 


(2) speed: 速度 参数 ， 可 选 。 
(3) callback: 在 动画 完成 时 执行 的 函数 ， 可 选 。 
10000U0U000 


前 面 的 几 个 例子 ， 从 不 同 的 方面 使 元 素 动 了 起 来 ，animate0) 方 法 也 可 以 使 元 素 动 起 来 ， 而 且 
animateO) 方 法 更 具有 灵活 性 。 通 过 animate0 方 法 ， 能 够 实现 更 加 精华 新 突 的 动画 效果 。 


首先 来 看 一 个 简单 例子 ， 有 一 个 空白 的 HTML 文档 ， 里 面 有 一 个 id="panel" 的 <div> 元 素 ， 当 
<div> 元 素 被 单 击 后 ， 能 在 页 面 上 横向 肚 动 。 


先 给 这 个 <div> 元 素 添 加 CSS 样式 。 
















































































#panel { 
position: relative; 
width: 100px: 
height:100px: 
border: lpx solid #0050D0; 
background: #96E555:; 
cursor: pointer; 


} 
此 时 页 面 的 初始 化 效果 如 图 4-26 所 示 。 
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为 了 使 这 个 元 素 动 起 来 ， 要 更 改元 素 的 “left” 样 式 属性 。 需 要 注意 的 是 在 使 用 animate() 方 法 
之 前 , 为 了 能 影响 该 元 素 的 “top”“left”“bottom” 和 “right” 样 式 属性 ， 必 须 先 把 元 素 的 position 
样式 设置 为 “relative” 或 者 “absolute”。 本 例 中 ， 设 置 的 是 “position:relative”， 有 了 这 个 值 ， 就 可 
以 调整 元 素 的 left 属性 ， 使 元 素 动 起 来 。 


现在 ， 添 加 如 下 jQuery 代码 : 
































$(function(){ 
$("#panel").click(function(){ 
$(this).animate({left: "500px"}, 3000); 
je 
} 


在 本 段 代 人 码 中 ， 首 先 为 id 为 “panel” 的 元 素 创 建 一 个 单 击 事件 ， 然 后 对 元 素 加 入 animate() 方 
法 ， 使 元 素 在 3 秒 〈3000 毫秒 ) 内 ， 向 右 移动 500 像素 。 运 行 效果 如 图 4-27 所 示 。 
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200000000 

在 之 前 的 代码 中 , 设置 了 {left: "500px"} 作 为 动画 参数 。 如 果 在 500px 之 前 加 上 “+=” 或 者 “一 =” 
符号 即 表 示 在 当前 位 置 累加 或 者 累 减 。 代 码 如 下 : 

$(function(){ 


$("#panel").click(function(){ 
Hb sanateel en 00px0 S00 sx 






































人 
DD 


300000 
(1) 同时 执行 多 个 动画 


在 上 面 的 例子 中 ,通过 控制 属性 left 的 值 实现 了 动画 的 效果 ， 这 是 一 个 很 单一 的 动画 。 如 果 需 
要 同时 执行 多 个 动画 , 例如 在 元 素 癌 右 滑动 的 同时 ,放大 元 素 的 高 度 。 根据 animate() 方 法 的 语法 结 
构 ， 可 以 写 出 如 下 的 jQuery 代码 : 


$(function(){ 
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$("#myImg").click(function(){ 
$(this).animate({left: "500px" ,height:"200px"}, 3000); 
Do 
和 


运行 代码 后 ，<div> 元 素 在 向 右 滑 动 的 同时 ， 也 会 放大 高 度 。 




















(2) 按 顺序 执行 多 个 动画 
上 例 中 ， 两 个 动画 效果 〈left:"500px" 和 height:"200px") 是 同时 发 生 的 ， 如 果 想 要 按 顺序 执行 
动画 ， 例 如 让 <div> 元 素 先 向 右 滑 劲 ， 然 后 再 放大 它 的 高 度 ， 上 只 需 把 代码 拆 开 ， 然 后 按照 顺序 写 就 
可 以 了 ，jQuery 代码 如 下 : 

$(this).animate({left: "500px"}, 3000) ; 

$(this).animate({height: "200px"}, 3000); 

因为 animate0) 方 法 都 是 对 同一 个 jQuery 对 和 象 进行 操作 , 所 以 也 可 以 改 为 链 式 的 写法 , 代码 
如 下 : 

$(this).animate({left: "500px"}, 3000) 
.animate({height: "200px"}, 3000); 

这 样 一 来 ， 就 满足 上 文 提出 的 需求 了 。 在 “left” 这 个 定位 属性 改变 之 前 ,“height” 属 性 将 不 
会 被 改变 。 像 这 样 ， 动 画 效果 的 执行 具有 先后 顺序 ， 称 为 “动画 队列 ”。 
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接 下 来 将 完成 更 复杂 的 动画 。 单 击 <div> 元 素 后 让 它 向 右 移 动 的 同时 增 大 它 的 高 度 ， 并 将 它 的 
不 透明 度 从 50% 变 换 到 100%， 然 后 再 让 它 从 上 到 下 移动 ， 同 时 它 的 宽度 变 大 ， 当 完成 这 些 效果 后 ， 
证 它 以 淡出 的 方式 隐藏 。 


实现 这 些 功能 的 jQuery 代码 如 下 : 
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$(function(){ 
HO anel SROSS ODay 0 辐 国 加 [了 加 加 上 加 
$("#panel").click(function(){ 
$(this).animate({left:"400px" ,height:"200px" ,opacity:"1"},3000) 
.animate({top: "200px", width :"200px"}, 3000 ) 
.fade0ut(" Slow ) ; 
人 
人 


运行 代码 后 , 动画 效果 一 步 步 执行 完毕 。 通 过 这 个 例子 可 以 看 出 , 为 同一 元 素 应 
可 以 通过 链 式 方式 对 这 些 效果 进行 排队 。 


j 多 重 效 果 时 ， 












































ee 
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在 上 例 中 ， 如 果 想 在 最 后 一 步 切换 元 素 的 CSS 样式 ， 而 不 是 隐藏 元 素 : 














css("border","5px solid blue") : 








如 果 只 是 按照 常规 的 方式 ， 将 fadeOut ("slow") 改 为 css ("border","Spx solid blue") 







































































这 样 并 不 能 得 到 预期 效果 。 预 期 的 效果 是 在 动画 的 最 后 一 步 改变 元 素 的 样式 ， 而 实际 的 效果 是 ， 
刚 开 始 执行 动画 的 时 候 ，css(0) 方 法 就 被 执行 了 。 















































[a | 田 | 


出 现 这 个 问题 的 原因 是 css0 方 法 并 不 会 加 入 到 动画 队列 中 ， 而 是 立即 执行 。 可 以 使 用 回调 函 
数 〈callback) 对 非 动画 方法 实现 排队 。 只 要 把 css0 方 法 写 在 最 后 一 个 动画 的 回调 函数 里 即 可 。 代 
码 如 下 : 




















































































































$("#panel").click(function(){ 
$(this).animate({left: "400px", height:"200px” ,opacity: "1"}, 3000) 
.animate({top: "200px"” , width :"200px"}, 3000, function(){ 
$(this).css("border","5px solid blue"); 
by 
| 











这 样 一 来 ，css0 方 法 就 加 入 到 动画 队列 中 了 ， 从 而 满足 了 上 文 提出 的 需求 。 











注意 : callback 回调 函数 适用 于 jQuery 所 有 的 动画 效果 方法 ， 例 如 slideDown() 方 法 的 回调 函数 : 


$("#element").slideDown("normal", function(){ 
训 轩 加 本 加 加 面 轩辕 面 加 加 
1s 


这 段 代码 表示 id = "element" 的 元 素 将 在 0.4 秒 内 (正常 速度 ) 向 下 完全 展开 。 当 动画 完成 后 ， 
执行 回调 函数 体内 的 代码 。 








426 DO0000000000000 








1l0000 












































很 多 时 候 需 要 停止 匹配 元 素 正 在 进行 的 动画 ， 例 如 上 例 的 动画 ， 如 果 需 要 在 某 处 停止 动画 ， 需 
要 使 用 stop0 方 法 。stop0 方 法 的 语法 结构 为 : 

































































stop([clearQueue], [gotoEnd]): 


参数 clearQueue 和 gotoEnd 都 是 可 选 的 参数 ,为 Boolean 值 (ture 或 flase )。clearQueue 代表 是 
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否 要 清空 未 执行 完 的 动画 队列 ，gotoEnd 代表 是 否 直 接 将 正在 执行 的 动画 跳 转 到 末 状 态 。 






























































移入 移 H 


一 个 动画 。 





































































































如 果 直 接 使 用 stop0 方 法 ， 则 会 立即 停止 当前 正在 进行 的 动画 ， 如 果 接 下 来 还 有 动画 等 竺 继续 
进行 ， 则 以 当前 状态 开始 接 下 来 的 动画 。 经 常会 遇 到 这 种 情况 ， 在 为 一 个 元 素 绑 定 hover 事件 之 后 ， 
用 户 把 光标 移入 元 素 时 会 触发 动画 效果 ， 而 当 这 个 动画 还 没 结束 时 ， 用 户 就 将 光标 移出 这 个 元 素 了 ， 
那么 光标 移出 的 动画 效果 将 会 被 放 进 队列 之 中 ， 等 待 光标 移入 的 动画 结束 后 再 执行 。 因 此 如 果 光 标 


















































以 下 代码 就 可 以 解决 刚才 的 问题 。 





$("#panel").hover(function() { 
$(this).stop() 

















1 得 过 快 就 会 导致 动画 效果 与 光标 的 动作 不 一 致 。 此 


入 stop0 方 法 ， 就 能 解决 这 个 问题 。stop0 方 法 会 结束 当前 ] 











时 只 要 在 光标 的 移入 、 移 出 动画 之 前 加 
E 在 进行 的 动画 ， 并 立即 执行 队列 中 的 下 












































































































































































































































gamimab ee ne sO il 0 0 
},function() { 
Sm Sol 
.animate( {height : "22",width : "60" } , 300 天 
os 
如 果 遇 到 组 合 动画 ， 例 如 : 
$("#panel").hover(function() { 
siniso Ns Lon 
.animate( {height : "150"},200) 加 
JA 
CA 
animae (Widene 00 0 
},function() { 
WSI Si 
.animate({height : "22” } ，200 ) 
.animate({width : "60" } , 300 ); 
jn 
此 时 只 用 一 个 不 带 参数 的 stop0 方 法 就 显得 力不从心 了 。 因 为 stop0 方 法 只 会 停止 正在 进行 的 
动画 ， 如 果 动 画 正 执行 在 第 1 阶段 (改变 height 的 阶段 )， 则 触发 光标 移出 事件 后 ， 只 会 停止 当前 
的 动画 ， 并 继续 进行 下 面 的 animate({width : "300" } , 300) 动画 ， 而 光标 移出 事件 中 的 动画 要 等 这 
个 动画 结束 后 才 会 继续 执行 ， 这 显然 不 是 预期 的 结果 。 这 种 情况 下 stop0 方 法 的 第 1 个 参数 就 发 挥 
作用 了 ， 可 以 把 第 1 个 参数 (clearQueue) 设置 为 tue， 此 时 程序 会 把 当前 元 素 接 下 来 尚未 执行 完 
的 动画 队列 都 清空 。 把 上 面 的 代码 改 成 如 下 代码 ， 就 能 实现 预期 的 效果 。 




















$("#panel").hover(function() { 
$(this).stop(true) 
.animate( {height:"150"}, 200 ) 








有 UUSEE 0 
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bfivme enon 
$(this).stop(true) 
.animate({height : "22" } , 200 ) 
NanimateClwiden 6000 
hs 


第 2 个 参数 〈gotoEnd) 可 以 用 于 让 正在 执行 的 动画 直接 到 达 结 束 时 刻 的 状态 ， 通 常用 于 后 一 
个 动画 需要 基于 前 一 个 动画 的 末 状 态 的 情况 ， 可 以 通过 stop(false,true) 这 种 方式 来 让 当前 动画 直接 
到 达 末 状态 。 
















































































当然 也 可 以 两 者 结合 起 来 使 用 stop(true,true)， 即 停止 当前 动画 并 直接 到 达 当 前 动画 的 末 状 态 ， 
玉 清 空 动画 队列 。 




































































注意 , jQuery 只 能 设置 正在 执行 的 动画 的 最 终 状 态 , 而 没有 提供 直接 到 达 未 执行 动画 队列 最 终 
状态 的 方法 。 例 如 有 一 组 动画 : 


















































$("div.content") 
.animate({width : "300"” } ,200 ) 
.animate({height : "150" } ，300 ) 
se me onare es eA eo 




















无 论 怎么 设置 stop0 方 法 ， 均 无 法 在 改变 “width” 或 者 “height” 时 ， 将 此 <div> 元 素 的 末 状 态 
变 成 300 x 150 的 大 小 ， 并 且 设 置 透明 度 为 0.2。 
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在 使 用 animate() 方 法 的 时 候 , 要 避免 动画 积累 而 导致 的 动画 与 用 户 的 行为 不 一 致 。 当 用 户 快速 
在 某 个 元 素 上 执行 animate0 动 画 时 ， 就 会 出 现 动画 积累 。 解 决 方法 是 判断 元 素 是 否 正 处 于 动画 状态 ， 
如 果 元 素 不 处 于 动画 状态 ， 才 为 元 素 添加 新 的 动画 ， 和 否则 不 添加 。 代 码 如 下 : 


























































































































if(! $(element).is(":animated")){ #0 oo oo aa wn 
加 轩 加 加 加 加 加 加 加 加 轩 加 加 加 加 加 加 加 

} 

这 个 判断 方法 在 animate() 动 画 中 经 常 被 用 到 ， 需 要 特别 注意 。 
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在 动画 执行 的 过 程 中 ， 如 果 想 对 动画 进行 延迟 操作 ， 那 么 可 以 使 用 delay0 方 法 ， 使 用 方式 如 下 : 





$(this).animate({left: "400px", height:"200px"” ,opacity: "1"}, 3000) 
.delay(1000) 
.animate({top: "200px” , width :"200px"}, 3000 ) 
.delay(2000) 
.fadeOut ("slow"); 
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delay() 方 法 允许 我 们 将 队列 中 的 函数 延 时 执行 。 它 既 可 以 推迟 动画 队列 中 函数 的 执行 ， 也 可 以 


























用 于 


定义 队列 。 
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除了 上 面 提 到 的 动画 方法 ，jQuery 中 还 有 4 个 专门 用 于 交互 的 动画 方法 。 





9 toggle( speed, [callback] )。 

9 slideToggle( speed, [ easing ], [callback] )。 
9 fadeTo( speed, opacity, [callback] )。 

9 fadeToggle (speed, [ easing ], [callback] )。 


10 toggle()0 口 
toggle() 方 法 可 以 切换 元 素 的 可 见 状 态 。 如 果 元 素 是 可 见 的 ， 则 切换 为 隐藏 的 ， 如 果 元 素 是 隐 





















































藏 的 ， 则 切换 为 可 见 的 。 





给 “内 容 ” 添 加 togsgle0 事 件 ， 代 码 如 下 : 


$("#panel h5.head").click(function(){ 
$(this).next().toggle(); 
be 


当 单 击 “ 标 题 ” 链 接 后 ,“ 内 容 ” 会 在 可 见 和 隐藏 两 种 状态 之 间 切 换 。 
相当 于 以 下 jQuery 代码 : 


$("#panel h5.head") .toggle(function(){ 
$(Cthis) .next() .hide() ， 
penneteon 
$(this).next().show():; 





be 

20 slideToggle()0 口 

slideToggle0 方 法 通过 高 度 变 化 来 切换 匹配 元 素 的 可 见 性 。 这 个 动画 效果 只 调整 元 素 的 高 度 。 
给 “内 容 ” 添 加 slideToggle0 事 件 ， 代 码 如 下 : 


























$("#panel h5.head").click(function(){ 
s(t enext sdelodole 
1 


当 单 击 “ 标 题 ” 链 接 后 ,“ 内 容 ” 会 在 可 见 和 隐藏 两 种 状态 之 间 切 换 ， 不 过 是 通过 改变 元 素 的 





高 度 来 实现 的 。 


040 jouery00000D0 


相当 于 以 下 jQuery 代码 : 


$("#panel h5.head").toggle(function(){ 
$(this).next().slideUp() 

baneton 
$(this).next().slideDown(); 

be 


30 fadeTo()0 口 


fadeTo() 方 法 可 以 把 元 素 的 不 透明 度 以 渐进 方式 调整 到 指定 的 值 。 这 个 动画 只 调整 元 素 的 不 
明度 ， 即 匹配 的 元 素 的 高 度 和 宽度 不 会 发 生变 化 。 


给 “内 容 ” 添 加 fadeTo0 事 件 ， 代 码 如 下 : 
























































$("#panel h5.head").click(function(){ 
$(this).next().fadelo(600, 0.2): 
DE 


当 “ 标 题 ”链接 被 单 击 后 ,“ 内 容 ” 会 渐渐 地 调整 到 指定 的 不 透明 度 (20%)。 

















40 fadeToggle()DD 


fadeToggle() 方 法 通过 不 透明 度 变化 来 切换 匹配 元 素 的 可 见 性 。 这 个 动画 效果 只 调整 元 素 的 
透明 度 。 


给 “内 容 ” 添 加 fadeToggle0 事 件 ， 代 码 如 下 : 


























二 








$("#panel h5.head").click(function(){ 
$(this).next().fadeToggle(); 
be 


相当 于 以 下 jQuery 代码 : 


$("#panel h5.head").toggle(function(){ 
$(this).next().fadeOut(); 

a eirmod 
Sstnms next oo fadelm( es 

) 六 
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从 基本 动画 方法 hide0 和 showO 到 fadeIfn0 和 fadeOutO0， 然 后 到 slideUpO 和 slideDownO， 朋 
自 定 义 动画 方法 animate0)， 最 后 到 交互 动画 方法 toggle0、slideToggle0，fadeTo0 和 fadeToggle()。 
在 介绍 了 如 此 多 的 动画 方法 后 ， 现 总 结 概 括 如 下 。 
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IUDUUU0U0D0D0 
表 4-1 动画 方法 说 明 
万 法 名 说 明 
hide0 和 show() 同时 修改 多 个 样式 属性 即 高 度 、 宽 度 和 不 透明 度 
fadeIn0 和 fadeOut() 只 改变 不 透明 度 
slideUp0 和 slideDown() | 只 改变 高 度 
fadeTo() 只 改变 不 透明 度 
toggle0 来 代替 hide0 方 法 和 show() 方 法 ， 所 以 会 同时 修改 多 个 样式 属性 即 高 度 、 宽 度 和 不 透明 度 
slideToggle() 来 代替 slideUp0 方 法 和 slideDown() 方 法 ， 所 以 只 能 改变 高 度 
fadeToggle() 来 代替 fadeIn0) 方 法 和 fadeOut0) 方 法 ， 所 以 只 能 改变 不 透明 度 
A 届 于 自 定义 动画 的 方法 ， 以 上 各 种 动画 方法 实质 内 部 都 调用 了 animate() 方 法 。 此 外 ， 直 接 使 





需要 特别 注意 animate() 方 法 ， 可 以 使 用 它 来 闪 代 其 他 所 有 的 动画 方法 。 

















用 animate() 方 法 还 能 自 定义 其 他 的 样式 属 作 


加 ”用 animate(0) 方 法 代替 show() 方 法 : 


$("p").animate({height : "show" 


等 价 于 : 


$("p").show(400):; 


, Width : "show” ,， 


加 ”用 animate(0) 方 法 代替 fadeIn0 方 法 : 


$("p").animate({ opacity : 


等 价 于 : 


$("p").fadeIn(400); 


"show” } ，400 ); 


加 ”用 animate(0 方 法 代替 slideDown() 方 法 : 


$("p").animate({height : "show" 


等 价 于 : 


$("p").slideDown(400); 


} ,400 ): 


加 ”用 animate() 方 法 代替 fadeTo() 方 法 : 


$("p").animate({ opacity : "0.6" 


等 价 于 : 


$("p").fadelo( 400 ， 


V6 交 


} ,400 ): 




















oe 





SMOW A000 


E， 例 如 : “left”、“marginLeft”“scrollTop” 等 


0D 40 jauery0000000 








事实 上 ， 这 些 动画 就 是 animate() 方 法 的 一 种 内 置 了 特定 样式 属性 的 简写 形式 。 在 animate() 方 
法 中 ， 这 些 特定 样式 的 属性 值 可 以 为 “show”“hide” 和 “toggle”， 也 可 以 是 自 定义 数字 ( 值 )。 


200000 
(1) 一 组 元 素 上 的 动画 效果 


加 ” 妆 在 一 个 animate() 方 法 中 应 用 多 个 属性 时 ， 动 画 是 同时 发 生 的 。 
日 ” 当 以 链 式 的 写法 应 用 动画 方法 时 ， 动 画 是 按照 顺序 发 生 的 。 


(2) 多 组 元 素 上 的 动画 效果 


日” 默认 情况 下 ， 动画 都 是 同时 发 生 的 。 
加 ” 当 以 回调 的 形式 应 用 动画 方式 时 ， 动 画 是 按照 回调 顺序 发 生 的 。 




























































































另外 ， 在 动画 方法 中 ， 要 注意 其 他 非 动 画 方法 会 插队 ， 例 如 css0) 方 法 要 使 非 动 画 方法 也 按照 
顺序 执行 ， 需 要 把 这 些 方法 写 在 动画 方法 的 回调 函数 中 。 


区 00o0o00o 


过 制作 某 视频 网 的 视频 展示 效果 ， 使 读者 对 jQuery 的 事件 和 动画 效果 有 一 个 更 为 全 面 
人 
















































































动漫 视频 。® [9 ? 和 多 动漫 视频 





死神 186 出 击 命令 ! 丝 拿 霞 08 战 争 童话 : 小菊 与 。 “10 月 新 得 《* 道 了 和 m6 金 》 潜 脑 调查 室 21 (1/2) 
大 路 家 > 震撼 人 心 剧 情感 人 至 ”新 PY 公开 房东 . 关 乌 YS 覃 仁 
房东 . 198505152d 房东 .小 如 于 

EF 油 启 相 麻衣 








D0428 000000 

用 户 可 以 单 击 左上 角 的 左右 箭头 ， 来 控制 视频 展示 的 左右 滚动 。 当 单 击 向 右 箭头 时 ， 下 面 的 展 

示 视 频 会 向 左 滚动 隐藏 ， 同 时 新 的 视频 展示 会 以 滚动 方式 显示 出 来 。 在 模拟 这 个 效果 之 前 ， 需 要 明 
确 哪些 是 必须 要 做 的 。 




































































日 。” 当 视频 展示 内 容 处 于 最 后 一 个 版 面 的 时 候 ， 如 果 再 向 后 ， 则 应 该 跳 转 到 第 一 个 版 面 。 
加 妆 视 频 展示 内 容 处 于 第 一 个 版 面 的 时 候 ， 如 果 再 向 前 ， 就 应 该 跳 转 到 最 后 一 个 版 面 。 
日 左上 角 的 箭头 旁边 的 蓝 色 圆 点 应 该 与 动画 一 起 切换 ， 它 代表 着 当前 所 处 的 版 面 。 


清 思 路 后 ， 就 可 以 开始 动手 制作 这 个 效果 。 
首先 把 页 面 结构 设计 好 ， 可 以 把 HTML 结构 简化 成 如 下 形式 : 
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<div class="V Show"> 
<div class="Vv caption"> 
Go! 
</div> 
<div class="v_content"> 
训 轩 加 加 轩 各 可 加 
</div> 
</div> 


最 终 实 际 页 面 的 HTML 代码 如 下 : 


<div class="V_show"> 
<div class="Vv caption"> 
<h2 class="cartoon" title="0D O00 ">0000</h2 
<div class="highlight tip"> 
<span class="current">1</span><span>2</span><span>3</span> <span> 4</span> 
</div> 
<div class="change btn"> 
<span class="prev" >D 0 0 </span> 
<span class="next">0 0 0 </span> 
</div> 


<em><a href="#">0 0 >></a></em> 


0@ 


</div> 
<div class="v_content"> 

<div class= vicContenta list > 
<Wl> 

<]1i><a href="#"><img src="img/01.jpg" alt="0 0 0 " /> </a><h4><a href="#">0 0 0 
</a></h4><span>0 0 :<em>28,276</em></span></1i> 
[ . .中 间 的 1i 元 素 省 略 ... ] 
<li><a href="#"><img src="img/04.jpg” alt="0 0 " /></a> <h4><a href="#">0 0 
</a></h4><span>0 0 <em>57,865</em></span></1i> 
</ul> 

</div> 

</div> 

</div> 


为 页 面 的 HTML 代码 应 用 CSS 后 ， 初 始 化 页 面 如 图 4-29 所 示 。 
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展示 区 域 ”。 


先 通过 jQuery 选择 器 获取 向 右上 


因为 “向 右 箭头 ”和 “视频 展示 
来 找到 “视频 展示 区 域 ”。 首 先 获 取 “ 癌 右 箭 状 ” 的 祖 多 











040 jQuery0000000 


接 下 来 的 工作 是 按照 需求 编写 脚本 ， 来 控制 页 面 的 交互 。 














jQuery 代码 如 下 : 


$("span.next").click(function(){ 


var $parent = $(this).parents("div.v_show"); 


var $v_show = $parent.find("div.v content list"); 


var $v_ content=$parent.find("div.v_content"); 


}) 


找到 相应 的 元 素 之 后 ， 就 可 以 给 相应 的 元 素 添加 动画 效果 了 。 可 以 通过 使 用 








的 箭头 的 元 素 ， 然 后 为 它 绑 定 click 


区 域 ”在 同一 个 祖先 元 素 下 ， 所 以 可 以 通过 “向 右 箭头 ” 
元 素 ， 然 后 在 祖先 元 素 下 寻找 “视频 





件 。 
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hil 








wl el eal 
yo 


0000 


铬 加 因 


四 四“ 加 有 时 加 加 









































四 加 加 





animate0 方 法 控制 


“视频 展示 区 域 ”的 left 样式 属性 的 值 来 达到 动画 效果 。 很 容易 就 可 以 获取 left 的 值 ，left 的 值 就 等 


















































可 以 使 














var v width = $v_content .width() : 


于 每 个 版 面 的 宽度 。 


] width() 方 法 来 获取 每 个 版 面 的 宽度 ， 代 码 如 下 : 





完成 这 一 步 后 ， 此 时 的 代码 如 下 : 





$("span.next").click(function(){ 


var $parent = $(this).parents("div.v_show"); 


var $v_show = $parent.find("div.v content list"); 


var $v content = $parent.find("div.v_content"); 


var vwidth = $v_content .width(): 
if( 当 动 画 到 最 后 一 版 面 ){ 
$v_show.animate({ left : '0px'}, "normal"); 


}elsef{ 


$v_show.animate({ left : '-="'+V width }, "norma 


) 


现在 的 问题 是 如 何 知 道 动画 已 经 到 达 最 后 一 版 。 











“视频 展示 区 域 ” 每 个 版 面 摆 放 了 4 张 视频 图 片 ， 妇 
数 除 以 4 就 可 以 得 到 总 的 版 面 数 。 例 如 总 共有 8 张 视频 
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Ce 
多 加 呈 加 本 加 融融 本 下 四 





启 加 呈 加 轴 呈 加 


分 加 加 Ue 加 加 加 加 和 加 加 


Vs 


er 


I 果 能 够 获取 到 视频 图 片 





的 总 数 ， 然 后 用 总 
































图 片 ， 那 么 就 是 2 个 版 





而 ， 如 果 有 12 张 视 
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频 图 片 ， 那 么 就 是 3 个 版 面 ; 如 果 只 有 9 张 视频 图 片 ， 则 必须 把 小 数 向 上 舍 入 ， 即 3 个 版 面 。 在 还 
没有 到 达 最 后 一 个 版 面 之 前 ， 需 要 在 当前 版 面 数 的 基础 上 加 1， 当 到 达 最 后 一 个 版 面 时 《〈 即 当前 的 
版 面 数 等 于 总 的 版 面 数 )， 则 需要 把 当前 的 版 面 数 设置 为 1， 使 之 重新 开始 动画 效果 。 





版 面 。 
如 果 想 甸 


值 就 



















































































日 ”首先 初始 化 当前 的 版 面 数 为 1， 即 第 1 个 版 


var "pagen = 





然后 根据 刚才 的 分 析 ， 写 出 如 下 代码 : 

var page = 1: 

var i = 4; 

$("span.next").click(function(){ 
Vaporarene. Ehis marenesO ov vshow 
var $v_show = $parent.find("div.v content list") 
var $v content = $parent.find("div.v_content"):; 
var v width = $v content.width() : 


Var 
Var 


下 


二 








en = $v_Sshow.find("1i").1ength 
page count = Math.ceil(len / i); 


page == page count ){ 


面 : 


疮 加 加 加 
We ek 
认 加 加 加 加 加 回回 轩 加 加 
A 











iy 


兴 加 0 











Ge ee Ee 


加 


$v_show.animate({ left : '0px'}, "slow"); 


page = 1; 
}elsef{ 


认 加 和 加 加 施加 加 加 加 加 加 业 六 加 加 


$v_show.animate({ left : '-="'+v width }, "slow"); 


agenu 


站 


多 加 四 重生 加 下 中 加 部下 硬 王 王 中 加 




















成 后 ， 还 需要 使 左上 角 的 箭头 劳 边 的 蓝 色 圆 点 跟随 动画 一 起 切换 , 来 标识 当前 所 处 的 























步 完 
要 把 样式 “current” 添 加 到 代表 当前 版 面 的 “ 葛 色 圆 点 ”上 就 可 以 了 。 
0 道 当前 的 版 面 数 ， 方 法 很 简单 ， 其 实 前 面 的 代码 已 经 完成 了 这 个 任务 ， 变 量 page 的 




















是 版 面 























然后 





p 


使 用 下 





$parent . 


数 。 由 于 eq0 方 法 的 下 标 是 从 0 开始 ， 因 | 目 
面 的 代码 来 标识 当前 版 面 : 





find("span").eq((page-1)).addClass("current" 

















只 要 把 page 减 去 1 就 可 得 到 当前 的 版 面 数 ， 


).Siblings().removeClass("current ") ; 





/0000 span0000 current gO000000 spanUUO0OOO0O00D0 currentDD 


此 时 ， 


把 代码 整合 ， 如 下 所 示 ; 
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var page = 1; 
var i = 4; WIA 
Wy 加 加 昌 
$("span.next").click(function(){ WA ek 
var $parent = $(this).parents("div.v_show"); VAL WEL 


var $v_show = $parent.find("div.v content list"); ya a oa ar a (aga 
var $v content = $parent.find("div.v_content"); 





Olliy 





var v width = $v content.width() : 
var lem ee venowen na en I aa 
var page count = Math.ceil(len / i): 














洲 加 加 加 
if( page == page count ){ 


























克 罩 三 划 三 三 天 三 三 三 三 王 天 王 三面 天 王 本 4 
$v_show.animate({ left : '0px'}, "slow"); 











加 加 加 加 栓 范 轩 加 加 加 加 加 4 加 加 


page = 1; 
}elsef 
$v_show.animate({ left : '-='+v width }, "slow"); 
光电 
page++; 


} 


$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); 
be 
运行 上 面 的 代码 ， 慢 慢 地 单 击 疝 右 按钮 ， 并 没有 发 现任 何 问题 ， 但 是 如 果 快 速 地 单 击 “ 回 右 ” 
按钮 ， 就 会 出 现 问题 了 : 放 开 光标 ， 图 片 还 在 深 动 。 
在 前 面 已 经 介绍 过 动画 队列 ， 这 里 的 问题 就 是 由 动画 队列 引起 的 。 当 快速 单 击 “ 向 右 ” 按 钮 时 ， 

单 击 产 生 的 动画 会 妃 加 到 动画 队列 中 ， 从 而 出 现 放 开 光标 之 后 ， 图 片 还 在 继续 深 动 的 情况 。 
为 了 解决 这 个 问题 ， 可 以 在 动画 方法 外 围 加 一 段 判断 元 素 是 否 处 于 动画 状态 的 代码 ， 如 下 所 示 : 



































二 






























































可- 

















































































































本 [加 
如 果 不 处 于 动画 ， 则 给 它 添加 下 一 个 动画 。 
最 终 的 jQuery 代码 如 下 : 






































$(function(){ 
var page = 1:; 
var i = 4; 训 轩 加 加 雪上 轩 加 
$("span.next").click(function(){ Va ee 
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var $parent = $(this).parents("div.v_show"); 
A 


var $v_show = $parent.find("div.v content list"); 


wg 


var $v content = $parent.find("div.v_content"); 

VA eli 
var v width = $v_content.width() : 
var len = $v_show.find("1i").length; 
var page count = Math.ceil(len / i): 
A 


if( !$v_show.is(":animated") ){ 












































加 加 加 加 加 加 加 加 加 加 加 加 曙 


和 加 
if( page == page count ){ 


$v_show.animate({ left : '0px'}, "slow"); 
A 


page = 1; 

}else{ 
部 轩辕 办 加 和 
$v_show.animate({ left : '-='+v width }, "slow"); 
page++; 


} 
$parent. find("span").eq( (page-1)).addClass("current") 


.Siblings().removeClass("current"): 


hs 











运行 代码 后 ， 单 击 “ 向 右 ” 按 钮 ， 效 果 一 切 正 常 。 此 时 已 经 把 “向 右 ” 按 钮 的 交互 效果 完成 了 。 
“向 左 ” 按 钮 的 交互 代码 与 “向 右 ” 按 钮 类 似 ， 区 别 是 在 当前 的 版 面 数 已 经 为 第 1 版 时 ， 如 果 再 往 


前 ， 则 需要 把 版 面 跳 转 到 最 后 一 个 版 面 ， 操 作 代码 如 下 : 



























































if( !$v_show.is(":animated") ){ 加 加 加 轩 夺回 轩 轩 加 二 加 加 加 加 加 加 0 
加 置 轩 加 加 二 加 加 加 加 加 轩辕 轩 加 加 加 加 


'-="'+V width*(page count-1) }, "Slow ) 











if( page == 1 ){ 
v_show.animate({ left : 
page = page count:; 
}elsel{ 





v_show.animate({ left : '+='+V width }, "slow"); 


Bdge 








I 




















世 
看 

过 
加 
洗 
酒 
工 
zy》 
CC 
者 
于 
a 




















此 时 ， 效 果 就 完成 了 ,“ 向 右 ” 和 “向 左 ”按钮 都 可 以 单 ; 
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040 jauey0000000 





前 版 面 也 能 被 标识 。 效 果 如 图 4-30 所 示 。 

















卡通 动漫 。 [< >| 二 














D430 0000 





注意 : JavaScript 的 动画 效果 跟 CSS 密 不 可 分 ， 在 上 例 中 ， 为 元 素 设置 合适 的 CSS 属性 也 至 关 重 要 ， 
比如 ， 我 们 为 “v_content” 设 置 了 overflow: hidden; position: relative;， 而 后 为 它 的 子 元 素 设 
置 了 position: absolute;。 




















本 章 主 要 讲解 了 jQuery 里 的 事件 和 动画 。 


本 章 上 半 部 分 讲解 的 是 jQuery 中 的 事件 。 从 最 开始 的 页 面 装载 讲 起 ， 在 这 个 过 程 中 ， 进 一 步 
介绍 了 ready0 方 法 ; 其 次 介绍 了 如 何 为 元 素 绑 定 事件 ， 接 下 来 介绍 了 jQuery 的 两 个 自 定义 事件 
hover0 方 法 和 toggle0) 方 法 ; 然后 通过 例子 来 讲解 事件 冒 泡 和 阻止 默认 操作 ;， 最 后 讲解 了 移 除 事件 
unbind() 方 法 ， 模 拟 事件 trigger0 方 法 和 bind0 方 法 的 其 他 用 法 。 


本 章 下 半 部 分 讲解 的 是 jQuery 中 的 动画 ,首先 从 最 简单 的 动画 方法 showO 和 hide0 方 法 开始 介 
绍 ， 通 过 带 参 数 和 不 带 参 数 两 种 方法 来 实现 动画 效果 ， 参 数 可 以 使 用 速度 关键 字 slow.fast 和 normal， 
也 可 以 自己 定义 数字 。 接 下 来 讲解 了 fadeIn0 和 fadeOut(0 方 法 ，slideUp0 和 slideDown0 方 法 ， 通 过 
这 些 方法 也 能 达到 同样 的 动画 效果 。 最 后 ， 介 绍 了 最 重要 的 一 种 方法 即 animate0 方 法 ， 通 过 此 方法 
不 仅 能 实现 前 面 的 所 有 动画 ， 也 能 自 定义 动画 。 在 做 动画 的 过 程 中 ， 需 要 特别 注意 动画 的 执行 顺序 ， 
也 要 注意 非 动画 方法 会 插队 ， 可 以 通过 动画 方法 的 回调 函数 解决 这 个 问题 。 


本 草 最 后 通过 茶 视 频 网 站 的 动画 效果 ， 进 一 步 加 深 了 读者 对 事件 和 动画 的 了 解 。 
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05D0 jQueryDOOOOD 
UUUUUUUUUD 

















通过 前 面 4 章 的 介绍 和 学 习 ， 读 者 已 经 对 jQuery 比较 熟 秋 了， 本章 将 通过 讲解 jQuery 在 表单 
(Form) 和 表格 〈Table) 中 的 应 用 来 加 深 对 jQuery 的 理解 。 表 单 和 表格 都 是 HTML 的 重要 组 成 部 
分 别 用 于 采集 、 提 交 用 户 输入 的 信息 和 显示 列表 数据 。 通 过 本 章 的 实战 锻炼 ， 相 信 读 者 的 jQuery 
技能 又 有 一 个 极 大 的 提高 。 


四 000 


:有 3 个 基本 组 成 部 分 
(1) 表单 标签 : 包含 处 理 表单 数据 所 用 的 服务 器 端 程序 URL 以 及 数据 提交 到 服务 器 的 方法 。 


(2) 表单 域 : 包含 文本 框 、 密 码 框 、 隐 藏 域 、 多 行文 本 框 、 复 选 框 、 单 选 框 、 下 拉 选 择 框 和 文 
件 上 传 框 等 。 


(3) 表单 按钮 : 包括 提交 按钮 、 复 位 按钮 和 一 般 按钮 ， 用 于 将 数据 传送 到 服务 器 上 或 者 取消 传 
送 ， 还 可 以 用 来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 


本 节 主 要 讲解 jQuery 在 表单 域 中 的 应 用 。 
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文本 框 是 表单 域 中 最 基本 的 元 素 ， 基 于 文本 框 的 应 用 有 很 多 。 此 处 只 简单 介绍 其 中 的 一 个 应 
用 一 一 获取 和 失去 焦点 改变 样式 。 


首先 ， 在 网 页 中 创建 一 个 表单 ，HTML 代码 如 下 : 












































<form action="#" method="POST" id="regForm"> 
<fieldset> 
<1egend>0DDDDD </iegend> 
<div> 
<label for="username">0 0 :</label> 
<input id="username”type= "text"> 


后 ， 











使 用 











</div> 
<div> 
<label for="pass">0 0 :</label> 
<input id="pass" type="password"> 
</div> 
<div> 
<label for="msg">0D 0 0 0 :</1abel> 
<textarea id="msg"></textarea> 























</div> 
</fieldset> 
</form> 
应 用 样式 后 ， 初 始 化 网 页 效果 如 图 5-1 所 示 。 
当 文 本 框 获取 焦点 后 ， 它 的 颜色 需要 有 变化 ; 当 它 失去 焦点 
则 要 恢复 为 原来 的 样式 。 此 功能 可 以 极 大 地 提升 用 户 体验 ， 














户 的 操作 可 以 得 到 及 时 的 反馈 。 可 以 使 用 CSS 中 的 伪 类 选择 








符 来 实现 以 上 的 功能 。 


CSS 代码 如 下 : 


input:focus , textarea:focust{ 
border: lpx solid #f00:; 
background: #fcc: 

} 


CSS 支持 的 不 足 。 














和 完 在 CSS 中 添加 一 个 类 名 为 focus 的 样式 。 
CSS 代码 如 下 : 








focusel 
border: lpx solid #f00: 
background: #fcc: 

} 


然后 为 文本 框 添加 获取 和 失去 焦点 事件 。 
jQuery 代码 如 下 : 


$(function(){ 
Oe nu inocusnmeon 
sehns saddolass ioous DE 
)).blur(function(){ 
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个 人 基本 信息 








名 称 : 











密码 : 











详细 信息 














旦 是 了 6 并 不 文 持 除 超 链 接 元 素 之 外 的 :hover 伪 类 选择 符 ， 此 时 可 以 


0 >- 




















1 0000000 


] jQuery 来 弥补 工 E6 对 


$(this).removeClass("focus"); 
网 


当 文本 框 获得 焦点 时 ， 会 出 现 图 5-2 所 示 的 效果 。 


















































详细 信息 :| 

















052 0000000 
经 过 处 理 后 ， 在 IE6 下 也 可 以 呈现 令 人 满意 的 效果 。 




















5.12 0OU0O000D0 


100000 
例如 某 网 站 的 评论 框 ， 如 图 5-3 所 示 。 














在 图 5-3 的 右上 角 ， 有 “+《 放 大 )” 和 “一 《缩小 ) ”的 按钮 ， 它 们 的 功能 就 是 用 来 控制 评论 杠 




















的 高 度 的 。 例 如 单 击 “-” 按 钮 ， 评 论 框 的 高 度 将 会 缩小 ， 如 图 5-4 所 示 。 







































































BZIEGe 亚 区 加 国 | 
缩小 编辑 区 域 
[sse] BZIUGioe 要 区 轿 加 + 
缩小 缤 丝 区 域 
口 533 四 回回 品 回 品 054 0000000 
评论 框 也 需要 设置 最 小 高 度 和 最 大 高 度 ， 当 达到 界限 后 再 单 击 按钮 , 评论 框 的 高 度 就 不 会 
任何 变化 。 




















首先 创建 一 个 表单 ， 其 中 包含 评论 杠 ，HTML 代码 如 下 : 























<form> 
<div class="msg"> 
<div class="msg caption"> 
<span class="bigger”" >0D 0 </span> 
<span class="smaller” >0 0 </span> 
</div> 
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050 jaouery00000000000000 


<div> 
<textarea id="comment" rows="8" cols="20°>000000000.000000000.000 
加 
加 
</div> 
</div> 
</form> 


然后 需要 思考 以 下 两 种 情况 。 






































































































































(1) 当 单 击 “ 放 大 ”按钮 后 ， 如 果 评论 框 的 高 度 小 于 500px， | 用人 证 相 全 
a i 本 杠 高 度 变 化 多 行文 本 杠 高 度 变 化 多 行文 本 框 高 度 变 化 
则 在 原 有 高 度 的 基础 上 增加 50px。 行文 二 村 高度 化 2 
(2) 当 单 击 “ 缩 小 ”按钮 后 ， 如 果 评 论 框 的 高 度 大 于 S0px， 
则 在 原 有 高 度 的 基础 上 减 去 50px。 053 0000000 
jQuery 代码 如 下 : 
$(function(){ 
var $comment = $('#comment'):; VO] 
$('.bigger').click(function(){ el 


if( $comment.height() < 500 ){ 


冯 加 加 
$comment .height( $comment.height() + 50 ):; 





} 
1 
$('.smaller').click(function(){ 轩辕 加 加 时 加 加 加 加 
if( $comment.height() > 50 ){ 
CA es 
$comment .height( $comment .height() - 50 ): 
} 
jo 


和 


当 单 击 “ 放 大 ”或 “缩小 ”按钮 后 ， 评 论 框 就 有 了 相应 的 变化 ， 但 此 时 评论 框 的 变化 效果 很 采 
板 ， 缺 乏 缓冲 效果 。 在 动画 草 节 里 ， 讲 解 过 自 定 义 动画 方法 animate0， 此 处 可 以 将 其 中 的 一 段 代码 : 


































































































comment.height( $comment.height() + 50 ): 

改 为 : 

$comment .animate({ height : "+=50” },400); 

丸 此 ， 当 单 击 “ 放 大 ”按钮 后 ， 评 论 框 的 高 度 会 在 0.4 秒 内 将 增 大 50 px。 
注意 在 动画 的 过 程 中 ， 需 要 判断 评论 框 是 否 正 处 于 动画 ， 如 果 处 于 动画 过 程 中 ， 则 不 追加 其 他 
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动画 ， 以 免 造成 动画 队列 不 必要 的 累积 ， 使 效果 出 现 问题 。 
最 终 的 jQuery 代码 为 如 下 : 


























$(function(){ 
var $comment = $('#comment'): CA 
$('.bigger').click(function(){ A 
if(!$comment.is(":animated")){ 2 
if( $comment .height() < 500 ){ 
VA es 
$comment .animate({ height : "+=50" },400); 
} 
} 
}) 
$('.smaller').click(function(){ WO 
if(!$comment.is(":animated")){ GA 
if( $comment.height() > 50 ){ 
VA les 
$comment .animate({ height : "-=50" },400); 
} 
} 
De 
be 



































此 时 评论 框 的 高 度 变化 具有 一 定 的 缓冲 效果 ， 比 直接 用 height0 方 法 的 效果 好 多 了 ，。 





















































200000000 
在 多 行文 本 框 中 ,还 有 另外 一 个 应 用 ， 就 是 通过 控制 多 行文 本 框 的 滚动 条 的 变化 ， 使 文本 框 里 
的 内 容 深 动 。 











与 控制 高 度 的 方法 相同 ， 只 不 过 此 处 需要 控制 的 是 男 一 个 属性 ， 即 scrollTop。 将 以 上 代码 改 成 
如 下 : 








$(function(){ 

var $comment = $('#comment'); 2 加 

son Re en 加 加 “加 轩 加 加 加 加 加 
if(!$comment.is(":animated")){ Za a a ol a 

$comment .animate({ scrollTop : "-=50" } , 400); 

} 

}) 

$(' .down').click(function(){ 加 


if(!$comment.is(":animated")){ 
$comment .animate({ scrollTop : "+=50" } , 400): 
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站 
当 单 击 “ 向 上 ”或 者 “向 下 ”按钮 和 时， 评论 框 的 深 动 条 就 会 深 动 到 指定 的 位 置 ， 效 果 如 图 5-6 
所 示 。 












































| 本 框 高 度 变化 多 行文 本 框 高 度 变化 多 行文 本 框 高 度 人 ^ 
度 化 多 行文 本 框 高 度 变化 多 行文 本 框 高 度 变 化 多 行 
文本 框 高 度 变化 多 行文 本 框 高 度 变化 多 行文 本 框 高 | 
度 变化 多 行文 本 框 高 度 变化 多 行文 本 框 高 度 变化 多 
行文 本 框 高 度 变化 多 行文 本 框 高 度 变 化 多 行文 本 框 

言 度 恋 人 名 行 言 讼 恋 八 名 行 吉 度 六 














EI 














D5-6 0000scrollToop0U0O00D0 
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对 复 选 框 最 基本 的 应 用 ， 就 是 对 复 选 框 进行 全 选 、 反 选 和 全 不 选 等 操作 。 复 杂 的 操作 需要 与 选 
项 挂钩， 来 达到 各 种 级 联 反应 效果 。 


首先 在 空白 网 页 中 创建 一 个 表单， 


























中 放 入 一 组 复 选 枉 ，HTML 代码 如 下 : 








Vy 
小 下 

















<form> 


OOo os 



































<input type="checkbox" name="items"” value="0D 0 "/>0O0O 
<input type="checkbox" name="items"” value="0D 0 "/>0O0O 
<input type="checkbox" name="items" value="D O00 "/2000 
<input type="checkbox" name="items" value="D 0 0 "/2000 <br/> 
<input type="button" id="CheckedAll" value="0 0 "/> 
<input type="button" id="CheckedNo" value="D 00"/ 
<input type="button" id="CheckedRev" value="D 0 "/> 
<input type="button" id="send" value="D 0 "/ 
</form> 
如 果 需 要 使 复 选 框 处 于 选中 或 者 不 选 状 态 ， 必 须 通 过 控制 元 素 的 checked 属性 来 达到 目的 。 如 























果 属 性 checked 的 值 为 true， 说 明 被 选中 ， 如 果 值 为 false， 说 明 没 被 和 ER 
选中 。 因 此 可 以 基于 这 个 属性 来 完成 需求 。 主 过 | 和 ?| 反思 | 里 交 | 
全 选 操作 就 是 当 用 户 单 击 “ 全 选 ”按钮 时 ， 需 要 将 复 选 杠 组 全 部 ”900 
选中 。 此 时 ， 需 要 为 “全 选 ”按钮 绑 定单 击 事件 ， 然 后 使 用 选择 符 寻 找 符合 要 求 的 复 选 框 ， 最 后 通 
过 attr0) 方 法 来 设置 属性 checked 的 值 ， 使 之 选中 。jQuery 代码 如 下 : 


$("#CheckedAl1").click(function(){ 
$( [name=items]:checkbox ) .attr( checked ，true) ; 
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全 不 选 操 作 ， 只 需要 将 复 选 框 的 checked 属性 的 值 设置 为 false， 就 可 以 实现 ，jQuery 代码 如 下 : 








$("#CheckedNo") .click(Cfunction(){ 
$('[name=items]:checkbox').attr('checked', false): 


DD 
反选 操作 稍微 有 些 复 杂 ， 需 要 循环 每 一 个 复 选 框 进行 设置 ， 取 它们 值 的 反 值 ， 即 如 果 是 true， 
就 设置 为 false; 如果 是 false， 就 设置 为 ttue， 此 种 情况 下 可 以 使 用 非 运 算 符 “1”。 


使 用 下 面 的 代码 来 实现 反选 操作 ; 























































































































("#CheckedRev").click(function(){ 
$('[name=items]:checkbox' ).each(function(){ 
sennavtn eneeked us Do eheene 和 


bE 

DD 
此 处 用 jQuery 的 attr0 方 法 来 设置 属性 checked 的 有 些 复杂 ， 如 果 改 用 JavaScript 原生 的 DOM 
方法 ， 将 比 创建 jQuery 对 象 更 有 效 、 简洁 。 


简化 后 的 代码 为 如 下 : 







































































$("#CheckedRev").click(function(){ 
$('[name=items]:checkbox').each(function(){ 
this.checked=!this.checked:; 
] 
os 
复 选 框 被 选中 后 ， 用 户 单 击 “ 提 交 ” 按 钮 ， 需 要 将 选中 的 项 的 值 输出 。 可 以 通过 val0 方 法 获 
取 选 中 的 值 。jQuery 代码 如 下 : 


























$("#send").click(function(){ 
Var sn 
$('[name=items]:checkbox:checked' ).each(function(){ 
St sD va ne 














J 
alert(str); 
Ds 
单 击 “提交 ”按钮 后 ， 显 示 效 果 如 图 5-8 所 示 。 






































此 处 不 用 按钮 来 控制 复 选 框 的 全 选 与 全 不 选 , 而 用 另 一 个 复 选 框 来 控制 , 将 按钮 代码 用 一 个 复 
选 杠 来 代 奉 ，HTML 代码 如 下 : 


HH 





























<form> 


和 


et 


= 
H+ 














人 

5 
ls) 

= 

et 





</form> 


ee = 





pe="button”" id="send" value="D 0D "/> 





你 爱好 的 运动 是 ? 
加 足球 贺 蓝 坏 回 羽 韦 款 回 芋 乓 球 





尾 = 加 | 区 和 了] 匡 芭 ] [本 -六 





























("#CheckedA 
ls 


}elsef{ 


首先 需要 对 男 一 个 复 选 相 


058 0000 





Ware lelan neon 刘 


050 jaouery00000000000000 


pe="checkbox” id="CheckedAll" />0 0 /人 00 <br/> 
pe="checkbox"” name="items" value="0D 0 "/>0 0 
pe="checkbox"” name="items" value="0D 0 "/>0 0 
pe="checkbox"” name="items" value="0D O00 "/2000 
pe="checkbox"” name="items" value="D 0 0 "/20 00 <br/> 





你 爱好 的 运动 是 ? 图 全 选 /全 不 选 
加 足球 回 篮 球 回 羽毛 球 回 乒 乓 球 


提 s 大 








059000000000 























EE 控制 ， 如 图 5-9 所 示 。 根 据 前 面 的 功能 代码 ， 可 以 写 出 下 面 的 代码 : 


checked){ A 
$('[name=items]:checkbox').attr("checked", true ) 


$('[name=items]:checkbox').attr("checked", false ): 


js 
进一步 观察 

















的 值 是 相同 的 ， 




















$("#CheckedA 
$( [name 


= 




















思考 后 发 现 ， 所 有 复 选 框 的 checked 属性 的 值 和 控制 全 选 的 复 选 框 的 checked 属性 
忆 此 可 以 省 略 庄 判断， 直接 赋值 ， 代 码 如 下 ; 




















oe ne 





tems]:checkbox').attr("checked", this.checked ) 


当 单 击 id 为 “CheckedAll” 的 复 选 框 后 ， 复 选 框 组 将 被 选中 。 当 在 复 选 框 组 里 取消 某 一 个 
选项 的 选中 状态 时 ，id 为 “CheckedAl1l1” 的 复 选 框 并 没有 被 取消 选中 状态 ， 而 此 时 需要 它 和 复 








选 框 组 能 够 联系 起 来 ， 即 复 选 框 组 上 




















选 





六 





此 需要 对 
路 如 下 。 
















































































如果 有 一 个 或 者 更 多 没 选中 时 ， 则 取消 id 为 “CheckedAll” 
的 复 选 框 的 选中 状态 ， 如 果 复 选 框 组 都 被 选中 时 ， 则 id 为 “CheckedAll” 的 复 选 框 也 自动 被 


























复 选 框 组 进行 操作 ， 以 通过 它们 来 控制 id 为 “CheckedAll” 的 复 选 框 。 有 具体 实现 思 
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(1) 对 复 选 框 组 绑 定 单 击 事件 。 
(2) 定义 一 个 flag 变量 ， 默 认为 true。 

















(3) 循环 复 选 框 组 ， 当 有 没 被 选中 的 项 时 ， 则 把 变量 flag 的 值 设置 为 false。 








(4) 根据 变量 flag 的 值 来 设置 id 为 “CheckedAll” 的 复 选 框 是 否 选中 。 















































GD 如 果 flag 为 true， 说 明 复 选 框 组 都 被 选 
@) 如 果 flag 为 false， 说 明 复 选 框 组 至 少 有 一 个 未 被 选中 。 
根据 以 上 的 思路 ， 可 以 写 出 如 下 jQuery 代码 : 



































$('[name=items]:checkbox').click(function(){ 
var flag=true; 
$('[name=items]:checkbox').each(function(){ 
if(!this.checked){ 
flag = false: 


je 
$('#CheckedA11').attr('checked', flag): 


1 








此 时 id 为 “CheckedAll” 的 复 选 枉 和 复 选 框 组 就 可 以 联动 起 来 了 ， 如 图 5-10 所 示 。 











除了 上 述 的 思路 之 外 ， 也 可 以 用 下 面 的 思路 来 实现 。 
(1) 对 复 选 框 组 绑 定 单 击 事件 。 
(2) 判断 复 选 框 的 总 数 是 否 与 选中 的 复 选 框 数量 相等 。 












































(3) 如 果 相 等 ， 则 说 明 全 选中 了 ，id 为 “CheckedAll” 的 复 选 框 应 当 处 于 选中 状态 ， 否 
选中 。 




















根据 提供 的 思路 ， 可 以 写 出 如 下 jQuery 代码 : 





$('[name=items]:checkbox').click(function(){ 





你 爱好 的 运动 是 ? 回 全 选 /全 不 选 
回 足 款 回 篮球 回 羽 毛 四 乒乓 天 
提 启 交 引 














0510000000000000 





加 轩 轩 轩辕 加 轩 轩 加 硬是 


var $tmp=$('[name=items]:checkbox'); 
Ver lll lee ke da 
$('#CheckedA11').attr('checked' ， 

$tmp. length==$tmp. filter(' :checked ). length ); 

be 


则 不 


050 jauery000o0oo0o0o0o000000 





注意 : 在 之 前 的 jQuery 版 本 中 ， 都 是 使 用 attr0) 来 访问 对 象 的 属性 ， 比 如 取 一 个 图 片 的 alt 属性 ， 
就 可 以 这 样 做 $( 相 mg).attrCalt); 但 是 在 某 些 时 候 ， 比 如 访问 input 的 disabled 属性 的 时 候 ， 
会 有 些 问题 。 在 有 些 浏 览 器 里 ， 只 要 写 了 disabled 属性 就 可 以 ， 有 些 则 要 写 : disabled = 
"disabled"。 所 以 ， 从 1.6 版 开始 ，jQuery 提供 新 的 方法 prop0 来 获取 这 些 属性 。 使 用 prop() 
的 时 候 ， 返 回 值 是 标准 属性 : true/false， 比 如 $(#checkbox').prop('disabled')， 不 会 返回 
“disabled” 或 者 “”， 只 会 返回 true/false。 当 然 赋值 的 时 候 也 是 如 此 。 这 样 ， 便 统一 了 所 有 
操作 ， 无 论 是 从 语法 上 还 是 语义 上 。 
那么 ， 哪 些 属性 应 该 用 attr0 访 问 ， 哪 些 应 该 用 prop0 访 问 呢 ? 
第 一 个 原则 : 只 添加 属性 名 称 该 属性 就 会 生效 应 该 使 用 prop(); 
第 二 个 原则 : 只 存在 true/false 的 属性 应 该 使 用 prop()。 
按照 官方 说 明 ， 如 果 是 设置 disabled 和 checked 这 些 属 性 ， 应 使 用 prop(0) 方 法 ， 而 不 是 使 用 
attr0) 方 法 。 所 以 ， 在 上 例 中 ， 建 议 把 所 有 attr0) 改 成 prop()。 





5.1.4 DOO0ODOODO 


























下 拉 框 有 非常 多 的 应 用 ， 这 里 也 只 选择 其 中 一 个 常用 、 典 型 的 应 用 来 进行 介绍 。 


















































5-11 是 某 网 站 的 一 个 后 台新 增 界面 ， 在 “负责 频道 ”这 个 区 域 ， 用 户 可 以 通过 中 间 的 按钮 
将 左边 选中 的 选项 添加 到 右边 , 也 可 以 将 右边 的 选项 添加 到 左边 , 或 者 双击 选项 , 将 其 添加 给 对 方 。 





























登录 账号 : ylxf 





登录 密码 : 123456 * 6 位 密码 以 上 
主持 人 名 : 莫 红 * 6 位 密码 以 上 
负责 频道 : 



































0000 
和 先 在 网 页 中 增加 一 左 一 右 两 个 下 拉 框 ， 然 后 在 它们 下 方 分 别 加 上 几 个 功能 按钮 。 
HTML 代码 如 下 : 


























<div class="centent"> 
<select multiple id="selectl" style="width:100px:height:160px;"> 
<option value="1">0 0 1</option> 
<option value="2">0 0 2</option> 
<option value="3">D 0 3</option> 
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< 
< 
< 
加 
ee 
</sele 
<div> 


<span id="add” >0D O00OO0O0O0D 9t:&9t:</span> 


option value="4">0 0 4</option> 
option value="5">0 0 5</option> 
option value="6">0 0 6</option> 
option value="7">0 0 7</option> 
option value="8">0 0 8</option> 
CE 


<span id="add all" >0 000000 &9t:;89t:;</span> 


</div> 
/ON 
<div class 


="Centent"> 


<select multiple id="select2" style="width: 100px;height:160px; "> 


</sele 
<div> 


<span id="remove">&1t:&1t:0 DO 0000D :</span> 


C= 


<span id="remove all">&lt;&lt:0 O00000 :</span> 


</div> 
</div> 


初始 化 后 ， 





网 页 效果 如 图 5-12 所 示 。 











需要 实现 的 功能 如 下 。 


(1) 将 选 








FP 的 选项 添加 给 对 方 。 


(2) 将 全 部 选项 添加 给 对 方 。 


(3) 双击 某 个 选项 将 其 添加 给 对 方 。 

















首先 实现 第 1 个 功能 ， 即 将 下 拉 列 表 ， 


首先 要 获取 下 拉 列 表 中 被 选中 的 选项 ， 然 后 将 当前 下 拉 列 表 中 选中 的 选项 删除 ， 最 后 将 删除 的 
































选项 添加 给 对 方 。 





$('#add').c 
var $0 
var $r 
remov 


) 六 





腿 设 先 将 左边 的 选项 添加 到 右边 。jQuery 代码 如 下 : 


lick(function() { 


ptions = $('#selectl option:selected') 


emove = $options.remove():; 
e.appendTo( '#select2') 








在 前 面 的 章节 提 到 过 ,删除 和 退 加 这 两 个 步骤 可 以 











面 代码 简化 如 下 : 


























ET 


SF FTE 
0 5-12 00000 














被 选中 的 选项 添加 给 对 方 。 

















加 加 加 加 和 
训 加 加 加 加 加 加 OO 
浊 吕 OO 


] appendTo() 方 法 直接 完成 ， 因 此 可 以 将 上 





$('#add').click(function() { 
var $options = $('#select]l option:selected'): wa oo 
$options.appendTo( '#select2' ): Vl 

js 


然后 实现 第 2 个 功能 ， 即 将 全 部 的 选项 添加 给 对 方 。 


将 全 部 的 选项 添加 给 对 方 和 将 选中 的 选项 添加 给 对 方 之 间 的 惟一 区 别 就 是 获取 的 对 象 不 同 ， 
此 只 要 稍微 修改 代码 就 可 以 实现 ，jQuery 代码 如 下 : 








$('#add all').click(function() { 
var $options = $('#selectl option'); VA 
$options.appendTo( '#select2' ): VOL] 

js 


最 后 实现 第 3 个 功能 ， 即 双击 某 个 选项 将 其 添加 给 对 方 。 
首先 给 下 拉 列 表 绑 定 双击 事件 。 
jQuery 代码 如 下 : 























$('#select1l').dblclick(function(){ 可 可 加 加 可 本 本 加 
加 ET 
DD 


然后 可 以 通过 $("option:selected",this) 方 法 来 获取 被 选中 的 选项 ， 这 样 就 可 以 完成 第 3 个 功能 
了 ，jQuery 代码 如 下 : 








$('#select1').dblclick(function( ){ Va 
var $options = $("option:selected",this); oo a 
$options.appendTo( '#select2' ): wa og 

DD 




















前 面 3 个 功能 都 是 将 左边 的 选项 添加 给 右边 , 如 果 要 将 右边 的 选项 添加 给 左边 , 代码 也 完全 相 
同 ， 此 处 不 再 袭 述 。 最 终 效 果 如 图 5-13 所 示 。 











页 
选项 6 选项 5 


选中 添加 到 右边 > 0 2 re] 
全 部 添加 到 广 边 六 《< 全 部 腹 除 天 左边 


0 5-13 0000 
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55 冲冲 刀 人 

表单 作为 HTML 最 重要 的 一 个 组 成 部 分 ， 儿 乎 在 每 个 网 页 上 都 有 体现 ， 例 如 用 户 提交 信息 、 
用 户 反 馈 信 息 和 用 户 碍 询 信 息 等 ， 因 此 它 是 网 站 管理 者 与 浏览 者 之 间 沟 通 的 桥梁 。 在 表单 中 ， 表 单 
验证 的 作用 也 是 非常 重要 的 ， 它 能 使 表单 更 加 灵活 、 美 观 和 丰富 。 

以 一 个 简单 的 用 户 注册 为 例 。 首 先 新 建 一 个 表单 ，HTML 代码 如 下 : 





<form method="post" 











aEEIOIE 之 








<div class="int"> 




































































































































































<label for="username">0 0 0 :</1abel> 

<input type="text" id="username" class="required" /> 
</div> 
<div class="int"> 

<label for="email">0D 0 :</1label> 

<input type="text" id="email" class="required" /> 
</div> 
<div class="int"> 

<label for="personinfo">0 0 0 0 :</label> 

<input type="text"” id="personinfo” /> 
</div> 
<div class="sub"> 

<input type="submit" value="0 0 " id="send"/><input type="reset" id="res"/> 
</div> 

</form> 

显示 效果 如 图 5-14 所 示 。 

在 表单 内 class 属性 为 “required” 的 文本 框 是 必须 填写 的 ， 因 此 需要 将 它 与 其 他 的 非 必须 填写 
表单 元 素 加 以 区 别 ， 即 在 文本 框 后 面 追 加 一 个 红色 的 小 星星 标识 。 可 以 使 用 append() 方 法 来 完成 ， 
代码 如 下 : 

$("form :input.required" ).each( function(){ 

var $required = $("<strong Class='high' > *</strong>"); a a a 
$(this).parent().append($required); //00000000 

DE 

显示 效果 如 图 5-15 所 示 。 

当 用 户 在 “用 户 名 ”文本 框 中 填写 完 信 息 后， 将 光标 的 焦点 从 “用 户 名 ”移出 时 ， 需 要 即时 判 
断 用 户 名 是 否 符合 验证 规则 。 当 光标 的 焦点 从 “邮箱 ”文本 框 移出 时 ， 需 要 即时 判断 “邮箱 ”填写 
是 否 正 确 ， 因 此 需要 给 表单 元 素 添加 失去 焦点 事件 ， 即 blur。jQuery 代码 如 下 : 




















050 jaouery00000000000000 


























用 户 名 用 户 名 
邮箱 邮箱 
个 人 资料 个 人 资料 
0 5-14 00000 上 -5<2145 四 加 四 下巴 年 是 
sionme no iu sa a aa 


汪 加 OO 
}) 























验证 表单 元 素 步 又 如 下 。 
(1) 判断 当前 失去 焦点 的 元 素 是 “用 户 名 ”还 是 “邮箱 ” 然后 分 别处 理 。 


(2) 如 果 是 “用 户 名 ”判断 元 素 的 值 的 长 度 是 否 小 于 6， 如 果 小 于 6， 则 用 红色 提醒 用 户 输入 
不 正确 ， 反 之 ， 则 用 绿色 提醒 用 户 输入 正确 。 


(3) 如 果 是 “邮箱 ”， 判 断 元 素 的 值 是 否 符合 邮箱 的 格式 ， 如 果 不 符合 ， 则 用 红色 提醒 用 户 输 
入 不 正确 ， 反 之 ， 则 用 绿色 提醒 用 户 输入 正确 。 


(4) 将 提醒 信息 追加 到 当前 元 素 的 父 元 素 的 最 后 。 
根据 以 上 分 析 ， 可 以 写 出 如 下 jQuery 代码 : 
































































































































I 































































































$ 


一 


本 

var $parent = $(this).parent(); 

品 柄 拐 吉 | 吧 

if( $(this).is('#username') ){ 

if( this.value=="" || this.value.length < 6 ){ 

anya on Me [a 
parent .append('<span class="formtips onError">'+error Msg+'</span>'); 
}else{ 
Var okMsg = "品目 品目 .…: 
parent .append('<span class="formtips onSuccess">'+ok Msg+ </Span> ) ; 





} 
WA 
if( $(this).is('#email') ){ 
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z2] {2,4}$/.test(this.value) ) ){ 
varmermmonMeo ee an 
$parent .append('<span class="formtips onError">'+error MSg+'</Span> ) : 
}else{ 


va okMsoo = os 
$parent.append('<span class="formtips onSuccess">'+ok Msg+'</span>'); 
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) 
当 连 续 儿 次 输入 错误 的 格式 后 ， 会 出 现 图 5-16 所 示 的 效果 。 
































用 户 名 |abede * @ 请 输入 长度 大 于 6 用 户 名 ，@ 请 输入 长 度 大 于 6 用 户 名 
邮箱 ”上 @ 请 输入 正确 的 E-Mail 地 址 
个 人 资料 





0516 000000000 


由 于 每 次 在 元 素 失 去 焦点 后 ， 都 会 创建 一 个 新 的 提醒 元 素 ， 然 后 将 它 追 加 到 文档 中 ， 最 后 就 出 
现 了 多 次 的 提醒 信息 。 因 此 ， 需 要 在 创建 提醒 元 素 之 前 ， 将 当前 元 素 以 前 的 提醒 元 素 都 删除 。 可 以 
使 用 remove0 方 法 来 完成 ， 代 码 如 下 : 



























































SC omm one ) oo A a a a Tay Lo 4 he 
var $parent = $(this).parent(); 
$parent.find(".formtips").remove(); /DDO00000000 



























































二 加 器 间 
J 
显示 效果 如 图 5-17 所 示 。 用 户 名 |abcdef * @ 输入 正确 
邮箱 : abcd@email. com * 加 输入 正确 
当 和 鼠标 在 表单 元 素 中 多 次 失去 焦点 时 ， 都 可 以 提醒 用 户 填写 ”| 人 各 
当 民 标 在 元 素 多 次 失去 喜 点 时 ee ot 所 填 了 
是 否 正确 。 但 是 ， 如 果 用 户 无 视 错误 提醒 ， 执 意 要 单 击 “ 提 交 ” ee 




















按钮 时 ,为 了 使 表单 填写 准确 , 在 表单 提交 之 前 , 需要 对 表单 的 
必须 填写 元 素 进行 一 次 整体 的 验证 。 可 以 直接 用 trigger0 方 法 来 触发 blur 事件 ， 从 而 达到 验证 效果 。 
如 果 填 写 错误 ,就 会 以 红色 提醒 用 户 ; 如 果 用 户 名 和 邮箱 都 不 符合 规划， 那么 就 有 两 处 错误 ， 即 有 
两 个 class 为 “onError” 的 元 素 ， 因 此 可 以 根据 class 为 “onError” 元 素 的 长 度 来 判断 是 否 可 以 提 
交 。 如 果 长 度 为 0， 即 tue， 说 明 已 经 可 以 提交 了 ; 如 果 长 度 大 于 0， 即 false， 说 明 有 错误 ， 需 要 
阻止 表单 提交 。 阻 止 表单 提交 可 以 直接 用 “return false” 语 句 。 


根据 上 面 的 分 析 ， 可 以 在 提交 事件 中 写 出 如 下 jQuery 代码 : 






























































| 中 
























































































































































$('#send').click(function(){ 
$("form .required:input").trigger('blur'); 
var numError = $('form .onError').length; 





if(numError){ 
return false; 
} 
SY 
ho 


显示 效果 如 图 5-18 所 示 。 
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050 jaouery00000000000000 








用 户 也 许 会 提出 : 为 什么 每 次 都 要 等 字段 元 素 失去 













































































焦点 后 ， 才 提醒 答 入 是 否 正确 ?如 果 输 入 时 就 可 以 提醒 ， 一 
这 样 就 可 以 更 加 即时 了 。 i i i 

为 了 达到 用 户 提出 的 需求 ， 需 要 给 表单 元 素 绑 定 ”| [和 
keyup 事件 和 focus 事件 ，keyup 事件 能 在 用 户 每 次 松 开 “| | 克 mt.aBRataw 遇 有 
按键 时 触发 ， 实 现 即 时 提醒 ; focus 事件 能 在 元 素 得 到 焦 EE 
点 的 时 候 触 发 ， 也 可 以 实现 即时 提醒 。 

代码 如 下 : ee 


$( form :input').blur(function(){ 
加 
名 看 加 加 加 二 
)) .keyup(function(){ 
$(this).triggerHandler("blur"): 
}).focus(function(){ 
Suhiso ug 
))s 
这 样 当 用 户 将 光标 定位 到 文本 框 上 和 改变 文本 框 的 值 时 ， 表 单 就 会 即时 提醒 用 户 填 写 是 否 正 
确 ， 从 而 符合 了 用 户 的 需求 。 


在 前 面 的 章节 已 经 提 过 ，trigger("blur") 不 仅 会 触发 为 元 素 绑 定 的 blur 事件 ， 也 会 触发 浏览 器 默 
认 的 blur 事件 , 即 不 能 将 光标 定位 到 文本 框 上 。 而 triggerHandler("blur") 只 会 触发 为 元 素 绑 定 的 blur 
事件 ， 而 不 触发 浏览 器 默认 的 blur 事件 。 


至 此 ， 表 单 验 证 过 程 就 全 部 完成 。 读 者 可 以 根据 自己 的 实际 需求 修改 验证 规则 。 
























































> 归 





















































注意 : 客户 端的 验证 仅 用 于 提升 用 户 操作 体验 ， 而 服务 器 端 仍 需 对 用 户 输入 的 数据 的 合法 性 进行 
校 验 。 对 于 禁用 了 脚本 的 用 户 和 用 户 自制 的 网 页 提交 操作 ， 必 须 在 服务 器 端 验 证 。 


区 0000 


在 CSS 技术 之 前 ， 网 页 的 布局 基本 都 是 依靠 表格 制作 ， 当 有 了 CSS 之 后 ， 表 格 就 被 很 多 设计 
师 所 抛弃 。 但 笔者 认为 ,在 进行 网 页 布局 时 不 能 盲目 地 抛弃 表格 , 在 该 用 表格 的 时 候 , 还 要 用 表格 。 
例如 数据 列表 。 用 表格 来 显示 非常 适合 。 


下 面 以 表格 中 儿 个 常用 的 应 用 作为 示例 来 讲解 。 
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5.2.1 DOD0OD0 














例如 一 张 人 员 资料 表 ， 其 HTML 代码 如 下 : 





























<table> 

<thead> 
<tr><th>0 0 </th><th>0 0 </th><th>0 0 0 </th></tr> 

</thead> 

< 七 Dody> 
=bp><td30 /dd dW 
<=Br><td0 dt dA 
<tr><td>0 0 </td><td>0 </td><td>0 0 0 0 </td></tr> 
<br><td30 /dst /dE 
<tr><td>Rain</td><td>0 </td><td>0 0 0 0 </td></tr> 
<tr><td>MAXMAN</td><td>0 </td><td>0 0 0 0 </td></tr> 







































































</tbody> 

</table> 

应 用 样式 后 ， 显 示 效 果 如 图 5-19 所 示 。 焉 名 性 别 暂 信 地 
张 册 男 浙 了 宁波 

这 是 一 张 非常 普通 的 表格 ， 现 在 需要 给 表格 进行 隔行 变色 操作 。 。 怪 有 et 
起 六 男 浙江 温州 

Rain 男 浙江 杭州 

4 | | | 口 口 品 MAXMAN 女 浙江 杭州 

f 先 定义 两 个 样式 。 0 5-19 00000 

CSS 代码 如 下 : 

.even{ background:#FFF38F:} 钴 加 加 加 四 本 党 

.0dd{ background:#FFFFEE;} Ws (ON 因 辐 回民 


























然后 选择 表格 奇数 行 和 偶数 行 分 别 添加 样式 ， 可 以 使 用 选择 器 来 完成 ， 代 码 如 下 ; 














$(function(){ 
gr od Kaddoless( od 乱 加 大 到 天 下 三 加 加 2 
$("tr:even").addClass("even"): 旋回 加 加 OOO 2 














Ds 
显示 效果 如 图 5-20 所 示 。 











意 : $("tr:odd") 和 $("tr:even") 选 择 器 中 索引 是 从 0 开始 的 ， 因 此 第 工行 是 偶数 。 


HH- 
另 











上面 的 代码 会 将 表 头 也 算 进 去 ， 因 此 需要 排除 表格 头 部 <thead> 中 的 <tr>， 将 选择 符 改 成 如 下 














代码 : 
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RN 050 jauey00000000000000 






































$(function(){ 
$("tbody>tr:odd").addClass("odd"); WO 
$("tbody>tr:even").addClass("even"): srl oeroml go a oo | 
yy 
显示 效果 如 图 5-21 所 示 。 
姓名 性 别 暂 企 地 姓名 性 别 暂 住 地 
张 山 男 浙江 宁波 张 山 Ee 浙江 宁波 
李 四 女 浙江 杭州 李 四 女 浙江 杭州 
王 男 湖南 长 沙 臣下 男 湖南 长 沙 
六 男 浙江 温州 六 男 浙江 温州 
Rain 男 浙江 杭州 Rain 男 浙江 杭州 
MAXMAN 女 浙江 杭州 MAXMAN 女 浙江 杭州 
05-20 D0000000 0 5-21 000000 
如 果 还 需要 将 某 一 行 变 为 高 亮 显示 状态 ， 那 么 可 以 使 用 contains 选择 器 来 实现 。 例 如 “ 王 五 ” 














这 行 ， 代 码 如 下 : 
$("tr:contains(' 虽 ')").addClass("selected"); 


显示 效果 如 图 5-22 所 示 。 


200000000000 
在 以 上 表格 的 基础 上 ， 在 第 1 列 前 加 上 一 列 单 选 枉 ， 如 图 5-23 所 示 。 






































姓名 性 别 暂 住 地 - ee 2 ee 
续 另 导演 - :二 
李 四 女 浙江 杭州 | ps ee 
TY 
5 和 六 江 注 放 © 起 六 男 潮 
Rain 男 浙江 杭州 © Rain 男 浙江 杭州 
MAXMAN 女 浙江 杭州 © MAXMAN 支 浙江 杭州 
0522 0000“00”00 0523 0000000 




















当 单 击 某 一 行 后 ， 此 行 被 选中 高 亮 显示 ， 并 且 单 选 框 被 选中 。 实 现 该 过 程 需要 以 下 几 个 步骤 。 
































(1) 为 表格 行 添加 单 击 事件 。 
(2) 给 单 击 的 当前 行 添加 高 亮 样 式 ， 然 后 将 它 的 兄弟 行 的 高 亮 样式 去 掉 ， 最 后 将 当前 行 里 的 单 
选 框 设置 为 选中 。 
根据 分 析 ， 可 以 写 出 如 下 jQuery 代码 : 









































gO Lody2tr Nel ek( funct on 
$(this) 
.addClass('selected') 
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000jouev00 200 


.Siblings().removeClass('selected') 
.end() 
fa madnor ate eneeked uueDs 

















这 样 ， 就 可 以 通过 单 击 每 行 来 实现 表格 行 高 亮 ， 同 时 此 行 所 在 的 单 选 框 也 被 选中 。 


























F 面 代码 中 使 用 了 end0 方 法 ， 当 前 对 象 是 $(this)， 当 进行 addClass('selected") 操 作 时 ， 对 和 象 } 
未 发 生变 化 ， 当 执行 siblings().removeClass('selected') 操 作 时 ， 对 象 已 经 变 为 $(this).siblingsO， 
此 后 面 的 操作 都 是 针对 这 个 对 和 象 的 ， 如 果 需 要 重新 返回 到 $(this) 对 象 ， 就 可 以 使 用 end0 方 法 ， 这 
样 后 面 的 
























































nd cono Na en es 

操作 就 是 : 

SS SETO a eneeked ue 

而 不 是 : 
$(this).Siblings().find( :radio' ).attr( checked ,true) 


另外 ， 初 始 化 表格 的 时 候 ， 如 果 默 认 已 经 有 单 选 框 被 选中 ， 那 么 也 需要 处 理 ， 代 码 如 下 : 
























































$('table :radio:checked' ).parent().parent().addClass('selected'): 


这 样 当 初始 化 表格 的 时 候 ， 默 认 已 经 选中 的 行将 被 高 亮 显 示 ， 如 图 5-24 所 示 。 




















姓名 性 别 暂 住 地 
© 张 山 男 浙江 宁波 
© 李 四 女 浙江 杭州 
© 起 六 男 浙江 温州 
© Rain 男 浙江 杭州 
© MAXMAN 妇 浙江 杭州 

0524 D0000000000 
注意 : $('table :radio:checked').parent().parent().addClass('selected'); 是 通过 parent() 方 法 逐步 向 父 节点 


获取 相应 的 元 素 的 ， 也 可 以 使 用 parents() 方 法 直接 获取 : 

$('table :radio:checked').parents("tr").addClass('selected'); 

此 外 ， 如 果 通 过 has 选择 器 也 可 以 进一步 简化 ， 表 示 含有 选中 的 单 选 框 的 <tr> 行 将 被 高 亮 显 示 
$('tbody>tr:has(:checked)').addClass('selected'): 





300000000000 
复 选 框 控制 表格 行 与 单 选 框 不 同 ， 复 选 框 能 选择 多 行 变色 ， 并 没有 限制 被 选择 的 个 数 。 当 单 















































050 jaouery00000000000000 





























某 行 时 ， 如 果 已 经 高 亮 了 ， 则 移 除 高 亮 样式 并 去 掉 当 前 行 复 选 框 的 选中 状态 ; 如 果 还 没 高 亮 ， 则 添 
加 高 亮 样式 并 将 当前 行 的 复 选 框 选中 。 


判断 是 否 已 经 高 亮 ， 可 以 使 用 hasClass() 方 法 来 完成 。jQuery 代码 如 下 : 





























sebodyer oelneniunet on 的 硬 人 
if ($(this).hasClass('selected')) { / 少 0000D0 selected00ODD 
$(this) 
.removeClass('selected') 
.find(' :checkbox').attr('checked' ,false); 


}else{ 
$(this) 
.addClass('selected') 
.find(':checkbox' ).attr('checked' ,true); 
} 


es 
显示 效果 如 图 5-25 所 示 。 









































姓名 性 别 暂 企 地 
国 张 山 男 浙江 宁波 
Ee 李 四 女 浙江 杭州 
加 起 六 男 浙江 温州 
国 Rain 男 浙江 杭州 











05 2 00000000 
此 外 ， 在 不 改变 设计 思路 的 前 提 下 ， 上 面 的 代码 还 可 以 再 简化 成 如 下 代码 : 




















$('tbody>tr').click(function() { 
加 轩辕 加 于 加 
var hasSelected=$(this).hasClass('selected'): 
//00000000 selected0 O000000 selected0 
$(this)[Lhasselected?"removeClass":"addClass" |('selected' ): 
/00000 checkbox0 O00000O 
.find(':checkbox').attr( 'checked' , !hasselected ); 


) 





注意 : 在 $(this)[hasSelected?"removeClass":"addClass"]('selected'); 中 : 
[hasSelected?"removeClass":"addClass"] 这 是 一 个 三 元 运算 ， 结果 为 : "removeClass" 或 者 
"addClass"。 因 此 
$(this)[hasSelected? "removeClass":"addClass"]('selected' ): 


其 实 代 表 这 2 种 情况 : 
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$Gthis)[ "removeClass"]( "Selected ) 
00s$this)[f"addClass"]('selected'): 
它们 等 价 于 : 

Poms mnenvedass selectede,, 
00s$this).addClass('selected') 

















当 用 户 刚 进 入 页 面 时 ， 也 要 处 理 已 经 被 选中 的 表格 行 。jQuery 代码 如 下 : 








$('tbody>tr:has(:checked)').addClass('selected'); 


5.2.2 000000 








在 上 例 的 人 员 表 格 的 基础 上 ， 增 加 人 员 分 类 。 
HTML 代码 如 下 : 








<tab1e> 

<thead> 

< 0h /As A/ 

</thead> 

<tbody> 
<tr class="parent” id="row 01"><td colspan="3">00OO0OO0D</td></tr> 
<wreelass emi < Gd Nas<An 
<wrelass— enim ow Eds d<tde sd 


<tr class="parent” id="row 02"><td colspan="3">00ODOO0ODO</td></tr> 
加 Glass endnoW 0 < dd 
<Greelass= ml ow ee >< /<ed0 At<GU dA 





<tr class="parent” id="row 03"><td colspan="3">0 [000000 </td></tr> 

<tr class="child row 03"><td>Rain</td><td>0] </td><td>D 0 0 0 </td></tr> 

<tr class="child row 03"><td>MAXMAN</td><td>0 </td><td>0 0 0 0 </td></tr> 
</tbody> 

</table> 


显示 效果 如 图 5-26 所 示 。 
现在 需要 实现 的 是 当 单 击 分 类 行 时 ， 可 以 关闭 相应 的 内 容 。 例 如 单 击 “ 前 台 设 计 组 ” 行 ， 则 它 
对 应 的 “ 张 山 和 李 四 ” 两 行将 收缩 。 


在 这 个 表格 中 , 给 每 个 <tr> 元 素 设置 属性 是 非常 重要 的 , 读者 可 以 在 HTML 代码 中 看 出 一 些 规 
则 ， 即 给 分 类 行 设置 了 class="parent" 属 性 ， 同 时 也 分 别 给 它们 设置 了 id 值 ， 而 在 它们 下 面 的 行 ， 
只 设置 了 class 属性 ， 并 且 这 个 class 的 值 是 在 id 值 的 基础 上 通过 加 上 “child ”来 设置 的 。 基 于 以 
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上 规则 ，jQuery 实现 代码 如 下 : 






























































$(function(){ 
$('tr.parent').click(function(){ pa a a 
$(this) 
.toggleClass("selected") Va [LA el Ll 
eol mers aa eh ns oly exere lar 二 总 a a A a a 
Ie 
5 
运行 代码 后 ， 当 单 击 表格 的 父 行 后 ， 相 应 的 子 行 会 收缩 ， 如 图 5-27 所 示 。 
姓名 性 别 暂 住 地 
前 台 设 计 组 
张 册 男 浙江 宁波 姓名 性 别 暂 住 地 
李 四 女 浙 工 杭州 组 
前 台 开 发 组 张 山 男 浙江 宁波 
王 五 男 湖南 长 沙 李 四 女 浙江 杭州 
7 男 浙江 温州 
后 台 开 发 组 有 
Rain 男 浙江 杭州 Rain 男 浙江 杭州 
MAXMAN 女 浙江 杭州 MAXMAN 女 浙江 杭州 
0 5-26 0000 0527 0000000000000 


























在 图 5-26 中 ， 人 员 分 类 默认 是 展开 的 ， 如 果 当 用 户 刚 进入 页 面 时 ， 默 认 需 要 收缩 起 来 ， 也 是 






































很 简单 的 。 只 要 触发 click0 事 件 即 可 。jQuery 代码 如 下 : 


('tr.parent').click(function(){ 训 加 轩 加 加 加 加 
$(this) 
.toggleClass("selected") ZO A a 
“Sons el el ls. ol) eera le A a 
baclnlek (OE 
5.2.3 D000DO 





























如 下 : 


在 前 面 的 例子 中 ， 如 果 要 高 亮 显示 “ 王 五 ” 那 一 行 ， 可 以 使 用 contains 选择 器 来 完成 ， 代 码 





$("tr:contains(' 中 加 ')").addClass("selected"); 
证 加 oni 


利用 该 选择 器 再 结合 jQuery 的 fterO 筛 选 方法 ， 可 以 实现 表格 内 容 的 过 滤 。 
例如 使 用 下 面 的 jQuery 代码 就 可 以 筛选 出 含有 文本 “ 李 ” 的 表格 行 。 

















$(function(){ 
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$("table tbody tr").hide() 
lerk omnanns el sno 


})s 






























































显示 效果 如 图 5.28 所 示 。 TC 
李 字 女 浙江 杭州 
先 在 表格 上 方 添加 一 个 文本 框 ， 用 于 根据 用 户 输入 的 内 容 来 “| 又 男 湖南 长 沙 
筛选 表格 内 容 ， 然 后 为 文本 框 绑 定 keyup 事件 ， 代 码 如 下 : 0 5-28 000000 











(function(){ 
$("#filterName").keyup(function(){ 
/Ns 
Db: 





DE 
最 后 将 .filter(":contains( 李 7) 站 代码 中 的 “ 李 ” 用 变量 值 代 替 ， 代 码 如 下 : 











$(function(){ 
$("#filterName").keyup(function(){ 
$("table tbody tr").hide() 
EECEOIIESNITS ns sho 
Ds 
六 


当 在 文本 框 中 输入 “ 王 ” 时 ， 就 会 筛选 出 相应 的 表格 行 ， 显 示 效 果 如 图 5-29 所 示 。 


注意 表单 元 素 有 个 特点 ， 就 是 刷新 网 页 后 ， 其 值 会 保持 不 变 。 例 如 在 刚才 筛选 操作 后 ， 刷 新 网 
页 ， 则 会 出 现 图 5-30 所 示 的 现象 ， 表 单元 素 的 值 还 存在 ， 但 表格 内 容 已 经 被 刷新 了 。 





































































































Wm; [ 王 
姓名 性 别 暂 住 地 
张 册 男 浙 T 宁 波 
李 四 女 浙江 杭州 
Es 男 湖南 长 沙 
起 六 男 浙江 温州 
入 选 : | 王 Rain 男 浙江 杭州 
姓名 性 别 暂 住 地 MAN 广 浙江 杭州 
五 另 湖南 长沙 区 和 
2 员 和 李 字 女 产 T 术 放 
李 四 男 湖南 长 沙 
0 5-29 D00000000000 05-30 0000000000 























要 解决 这 个 问题 ， 只 需要 在 DOM 刚 加 载 完 时 ， 为 表单 元 素 绑 定 事件 并 且 立 即 触发 该 事件 
即 可 。 





$(function(){ 
$("#filterName").keyup(function(){ 
$("table tbody tr").hide() 


050 jaouery00000000000000 


Sen :eons dens va showne 
}) .keyup(); VD COPANO 
es 


这 样 ， 当 页 面 被 刷新 后 ， 就 会 立即 执行 id 为 “filterName” 的 keyup 事件 ， 因 此 表格 内 容 就 会 


























保持 刚才 筛选 出 来 的 结果 。 


区 000 


5.3.1 000000 














mt 








在 某 些 网 站 经 常 有 “放大 ”和 “缩小 ”字号 的 控制 按钮 ， 通 过 单 击 它们 ， 可 以 使 网 页 的 文字 时 
现 不 同 的 大 小 。 


先 在 空白 的 网 页 上 添加 两 个 字号 控制 按钮 和 一 些 文字 ，HTML 代码 如 下 : 


























<div class="msg"> 





<div class="msg caption"> 
<span class="bigger" >0 0 </span> 
<span class="smaller" >0 0 </span> 
</div> 
<div> 
<p id="para"> 
This is some text. This is some text. This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. This is some text. This is some text. This is some 
text. This is some text. This is some text. This is some text. This is some text. This is some text. This is 
Some text. This is some text. This is some text. 








</p> 
</div> 
</div> 
显示 效果 如 图 5-31 所 示 。 





This is some text. This is some text. 
This is some text. This is some text. 


当 单 击 这 两 个 按钮 时 可 以 分 别 控制 文本 字体 的 放大 和 缩小 。 This is some text. This is some text. 


This is some text. This is some text. 


























因此 ， 需要 对 外 放大 ” 按钮 和 ys 缩小 2 按钮 进行 相应 的 处 理 ， 代 This is some text. This is some text. 
人 码 如 下 : 05-31 0000000 


$(function(){ 
$("span").click(function( ){ 
var thisEle = $("#para").css("font-size"); 
var textFontSize = parseInt(thisEle , 10):; 
var unit = thisEle.slice(-2); 
var CName = $(this).attr("class"); 


163 


if(cName == “bigger"){ 
textFontSize += 2; 

}else if(cName == "smaller"){ 
textFontSize -= 2; 

} 


$("#para").css("font-size", textFontSize + unit ): 


DE 
下 面 详细 讲解 以 上 代码 所 完成 的 操作 。 


$(function(){ 
$("span").click(function(){ 
WY 
| 





DD 
当 文 档 加 载 完 毕 后 ， 为 所 有 的 <span> 元 素 绑 定单 击 事件 。 











var thisEle = $("#para").css("font-size"): 
var textFontSize = parseInt(thisEle , 10): 


获取 id 为 “para” 的 元 素 的 字体 大 小 。 获 取 的 值 是 将 返回 的 数字 和 单位 ， 即 16px。 然 后 使 用 
parseInt(0) 方 法 去 掉 单 位 ， 因 此 16px 就 变 成 了 16。parseInt(0) 方 法 的 第 2 个 参数 表示 进 制 ， 代 码 中 表 
示 的 是 十 进 制 。 












































var unit = thisEle.slice(-2): 

上 面 这 段 代 码 是 获取 单位 ，slice(0) 方 法 返回 字符 串 中 从 指定 的 字符 开始 的 一 个 子 字符 串 。 因 为 
这 里 使 用 的 度量 单位 px 是 两 个 字符 ， 所 以 指定 字符 串 应 该 从 倒数 第 2 个 字符 开始 。 在 后 面 再 次 设 
置 字体 大 小 时 ， 就 可 以 直接 把 单位 拼接 上 。 






















































































var cName = $(this).attr("class"): 
if(cName == "bigger"){ 
textFontSize += 2; 

}else if(cName == "smaller"){ 
textFontSize -= 





} 


站 语句 用 于 判断 当前 被 单 击 的 <span> 元 素 的 class 是 否 为 “bigger”。 如 果 是 “bigger”， 则 需要 
为 字体 变量 (textFontSize〉 增 加 2px。 如 果 单 击 的 是 “smaller”， 则 要 为 字体 变量 (textFontSize) 
减 掉 2px。 
























































$("#para").css("font-size", textFontSize + unit ):; 





最 后 ， 再 次 获取 “para” 元 素 并 为 它 的 font-size 属性 赋予 新 的 值 〈textFontSize)， 并 且 一 定 要 
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050 jaouery00000000000000 











拼接 上 单位 。 
如 果 发 现 无 限 放大 和 缩小 不 太 合适 ， 可 以 判断 一 下 最 小 字体 和 最 大 字体 ， 代 码 如 下 : 
多加 下 加 


if(cName == “bigger"){ 
We on E 人 2 坟 光 | 
textFontSize += 2; 
} 
}else if(cName == "smaller")t{ 
i eonisize = 2 州 
textFontSize -= 2; 


} 


$("#para").css("font-size", textFontSize + unit ) ; 


显示 效果 如 图 5-32 所 示 。 











EEN 

This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. 


05-32 000000 











2.32 00000 





























制作 选项 卡 的 原理 比较 简单 ， 通 过 隐藏 和 显示 来 切换 不 同 的 内 容 。 
与 前 面 例子 相同 ， 首 先 构建 HTML 结构 ， 代 码 如 下 : 









































<div classs=s'tab"> 





<div class="tab menu"> 
<ul> 
<]i class="selected">0 0 </1i> 
eT 
=m 
eA 
</div> 
<divclass= tabe box > 
<div>0 0 </div> 
<div class="hide">0 0 </div> 
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000 jQuery00 200 


<div class="hide">0D 0 </div> 





































































































</div> 
</div> 
应 用 样式 后 ， 网 页 呈现 效果 如 图 5S-33 所 示 。 时 事 | 体育 娱乐 
h 摔 

默认 是 选项 卡 的 第 1 个 选项 被 选中 ， 然 后 下 面 区 域 显示 相应 
的 内 容 。 例 如 图 5-33 所 示 ， 当 单 击 “ 体 育 ” 选 项 卡 时 ,“ 体 育 ” 选 
项 卡 将 处 于 高 亮 状态 ， 同 时 下 面 的 内 容 也 切换 成 “体育 ”了 。 当 
单 击 “ 娱 乐 ” 选 项 卡 时 ， 也 显示 相应 的 内 容 。 下 面 将 详细 介绍 实 0533 D00000 
现 选项 卡 的 过 程 。 

首先 需要 为 <li> 元 素 绑 定单 击 事件 ， 代 码 如 下 : 

var $div_ 1i =$("div.tab menu ul 1i"): 

Ova eek een a a Nal 





We 
) 


绑 定 事件 


























后 ， 需 要 将 当 站 


var $div_ 1i =$("div.tab menu ul 1i"): 


soma eel ere 


$(this).addClass("selected") 
.Siblings().removeClass("selected") 

























































































1 单 击 的 xli> 元 素 高 亮 ， 然 后 去 掉 其 他 同辈 <li> 元 素 的 高 亮 。 





WN 
加 加 加 














7IT 














过 索引 来 显示 对 应 的 区 域 ， 代 码 如 下 : 





加 回回 回回 轩 加 <1 加 加 加 0 


加 加 < 让 六 加 加 加 加 ei 加 间 
证 加 和 是 加 加 加 加 加 <li 得 





})s 
单 击 选 项 卡 后 ， 当 前 <li> 元 素 处 于 高 亮 状态 ， 而 其 他 的 xli> 元 素 已 去 掉 了 高 亮 状 态 。 但 选项 - 
下 面 的 内 容 还 没 被 切换 ， 因 此 需要 将 下 面 的 内 容 也 对 应 切换 。 显 示 效 果 如 图 5-34 所 示 。 
从 选项 卡 的 基本 结构 可 以 知道 ， 每 个 xli> 元 素 都 分 别 对 应 一 个 <div> 区 域 。 因 此 可 以 根据 当前 
单 击 的 <li> 元 素 在 所 有 <li> 元 素 中 的 索引 ， 然 后 通 
Var $div_ li =$("div.tab menu ul 1i"): 
Soave nvm 
$(this).addClass("selected") < 
.Siblings().removeClass("selected") 
Varaindqexs 0 on va de hs se 
Sv tay a > ony) yA 
.eq(index).show() 
.Siblings().hide():; 
))s 
这 样 ， 当 单 击 <li> 元 素 后 ， 选 项 卡 相 应 的 内 容 也 将 切换 ， 效 果 如 























图 5-35 所 示 。 
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wid + |S [ns | ss | ; 
9 事 性 育 
0534 000000 0535 DO0000000 


























在 上 面 的 代码 中 ,要 注意 $("div.tab_box > div") 这 个 子 选择 器 ,如果 用 $("div.tab_box div") 选 择 
器 ， 当 子 节 点 里 再 包含 <div> 元 素 的 时 候 ， 就 会 引起 程序 错乱 。 因 此 获取 当前 选项 卡 下 的 子 节点 ， 
才 是 这 个 例子 所 需要 的 。 


至 此 制作 选项 卡 的 过 程 就 完成 了 。 如 果 读 者 还 想 加 强 些 效果 ,例如 光标 滑 入 滑 出 效果 ， 可 以 添 
加 hover 事件 ， 代 码 如 下 : 





























Var $div li =$("div.tab menu ul 1i"): 
$ave ec ie 
$(this).addClass("selected") <Wi 加 上 
.Siblings().removeClass("selected"); wa mo | 
var index = $div_li.index(this); 
殉国 加 加 加 加 加 和 W<W7 加 轩 加 





$("div.tab box > div") 加 加 加 加 
.eq(index).show() 2 < a el | 
.Siblings().hide():; oi a aha a a soli 

}) .hover(function(){ VA 


$(this).addClass("hover"): 
},function(){ 
$(this).removeClass("hover"); 


DD 
这 样 当 光标 滑 过 其 他 选项 时 ， 选 项 的 样式 会 发 生变 化 ， 如 图 5-36 所 示 。 














| # 有 || 长 
肘 争 

















0 5-36 JD0“00”00 


5;3;3” 加. 占 , 吕 :如 





自从 Web 2.0 开始 流行 后 ， 很 多 网 站 更 加 注重 用 户 自 定义 ,例如 在 网 页 上 用 户 可 以 自 定义 新 闻 
内 容 ， 可 以 任意 拖 动 网 页 内 容 ， 也 可 以 给 网 页 选择 一 套 自己 喜欢 的 颜色 等 。 
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网 页 换 肤 的 原理 就 是 通过 调 / 























不 同 的 样式 表 文 伯 








来 实现 不 同 皮 肤 的 切换 ， 并 且 需 要 将 换 好 的 皮 


























肤 记 入 Cookie 中 ， 这 样 用 户 下 次 访问 时 ， 就 可 以 显示 用 户 自 定义 的 皮肤 了 。 
































<ul id="ski 


< Tee Sk 
ld es 
< Toe skein 
< oe eine 
<1i id="skin 4" 
< Toe sli 5 


</ul> 
<div id="di 





<div 





Nn"> 


v_side 0"> 


id="news"> 


<hl class="title">0 0 0 0 </hl> 


</div> 


</div> 
<div id="di 
< 


v_side 1"> 
d="game"> 


<hl class="title">0 0 0 0 </hl> 


</div> 


</div> 














然后 根据 HTML 代码 预定 义 儿 套 换 肤 用 的 样式 




















1 先 设置 HTML 的 结构 ， 在 网 页 中 添加 皮肤 选择 按钮 (<li> 元 素 ) 和 基本 内 容 ， 代 人 码 如 下 : 


title="0 0 " class="selected">0 0 </1i> 
title="0 0 ">0 0 </1i> 
title="0 0 "20 0 </1i> 
oles < 
title="0 0 ">0 0 </1i> 
niles A 


， 分 别 有 灰 色 、 紫 色 、 红 色 等 6 套 。 默 认 是 























注意 : 在 设计 HTML 代码 时 ， 用 了 一 些小 技巧 ， 就 是 将 皮肤 选择 按钮 <li> 元 素 的 id 与 网 页 皮肤 的 
样式 文件 名 称 设置 的 相同 。 这 样 就 可 以 使 完成 换 肤 操作 简化 很 多 。 











然后 为 HTML 代码 添加 样式 ,注意 HTML 结构 要 有 一 个 带 id 的 样式 表 链 接 , 通过 操作 该 链接 
的 href 属性 的 值 ， 从 而 实现 换 肤 。 代 码 如 下 : 


























<link href="css/skin 0.css" rel="stylesheet" type="text/css" id="cssfile" /> 


运行 后 网 页 的 初始 化 效果 如 图 5-37 所 示 。 





最 后 为 皮肤 选择 按钮 添加 单 击 事件 


(1) 当 皮 肤 选择 按钮 被 单 击 后 ， 当 前 皮肤 就 被 勾 选 。 
























































(2) 将 网 页 内 容 换 肤 。 









































先 完 成 第 1 步 ， 它 与 前 面 选项 卡 例子 中 高 亮 当 




















PETTTE 
有 如 下 两 个 步骤 。 时 事 新 闻 EE 
上 337 回回 加 回回 

前 选项 的 代码 相同 ， 代 人 码 如 下 : 


050 jaouery00000000000000 


var $1i =$("#skin 1i"); 
$1i.click(function(){ 
$("#"+this.id).addClass("selected") pa ol < oa gd 


.Siblings().removeClass("selected"); VI Si 
1 















































然后 完成 第 2 步 ， 即 设置 网 页 内 容 皮肤 。 前 面 为 <link> 元 素 设 置 的 ia， 此 时 可 以 通过 attr0 方 法 
为 <link> 元 素 的 href 属性 设置 不 同 的 值 ， 代 码 如 下 : 
























































var $1i =$("#skin 1i"); 
Sleemnekunesron 


$("#"+this.id).addClass("selected") ja gg or 
.Siblings().removeClass("selected"):; 加 加 加 加 专人 加 加 加 回电 
Hessnilen Nav een ees/ uns ess WAN IN 


J 











| 


完成 后 ， 当 单 击 皮肤 选择 按钮 时 ， 就 可 以 切换 网 页 皮肤 了 ， 如 ”| 各 吕 加 加 刁 司 
图 5-38 所 示 ， 但 是 当 用 户 刷新 网 页 或 者 关闭 浏览 器 后 ， 皮 肤 又 会 被 初 
始 化 ， 因 此 需要 将 当前 选择 的 皮肤 进行 保存 。 


二 | 上 = 村 的 pA ra . 有 5- 38 
在 jQuery 中 有 一 款 Cookie 插件 ， 它 能 简化 Cookie 的 操作 ,此 处 四 
就 将 其 引入 ， 代 码 如 下 ; 






































<!-- 00jQueryD cookieD 0 --> 
<script src="js/jquery.cookie.js" type="text/javascript"></script> 











注意 : Cookie 插件 的 具体 用 法 可 以 参考 第 7 章 。 





将 当前 皮肤 保存 进 Cookie， 代 码 如 下 : 


var $1i =$("#skin 1i"); 
$1i.click(function(){ 


$("#"+this.id).addClass("selected") yA | a 
.Siblings().removeClass("selected"); #0 wi 严 下 加 
Hessmile Racer lnen es sd RC VA 


Seooce MYCssSkeim emise id /pach expinesel0 


//D 0 Cookie 
es 

















保存 后 ， 就 可 以 通过 Cookie 来 获取 当前 的 皮肤 了 。 如 果 Cookie 确实 存在 ， 则 将 当前 皮肤 设置 
为 Cookie 记录 的 值 ， 代 码 如 下 : 





























WI 
var cookie skin = $.cookie( "MyCssSkin"); //D 0 CookieDDD 
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日 
碟 


度 


if (cookie skin) 回回 加 四 四 四 Cookie 
$("#"+cookie skin).addClass("selected") 
.Siblings().removeClass("selected"): 


HOHessnnles Nat ne ss Cook ens Ness 
anne /en 


$.cookie( "MyCssSkin" , cookie skin 


} 
Co 


完成 的 jQuery 代码 如 下 : 


$(function(){ 
var $1i =$("#skin 1i"); 
$1i.click(function(){ 
$("#"+this.id).addClass("selected") 
.Siblings().removeClass("selected"); 


He SS le ot en es si CS 
hs navh /ee 


$.cookie( “MyCSssSkin”， 
有 
var cookie skin = $.cookie( "MyCssSkin") 
if (cookie skin) { 

$("#"+cookie skin).addClass("selected") 
iblings().removeClass("selected"): 


a 


< 轩 加 加 
加 四 加 | 加 加 国 
/000000 


expires: 10 }); 


< 中 上 加 加 轩 
六 加 加 和 加 加 轩 才 磋 本 加 加 加 时 
/000000 


expires: 10 }); 


< 机 时 加 加 时 
开 轩 加 < 和 加 | 加 加 国 




















BOCs le ate ne ss tooo ens CSS /a 
$.cookie( "MyCssSkin” , a ees lms 





cookie skin 


os 
此 时 ， 网 页 换 肤 功能 不 仅 能 正常 切换 ， 而 且 也 能 保存 到 Cookie 中 ， 当 用 
当前 选择 的 皮肤 。 








户 刷新 网 页 后 ， 仍 然 


































































































$(function(){ 
var $1i =$("#skin 1i"); 
omelmekxen ne 














在 上 面 代码 中 ，click 事件 中 的 函数 内 容 与 站 (cookie skin) { } 内 的 判断 内 容 类 似 ， 只 是 有 一 个 
量 不 同 ， 因 此 可 以 通过 给 函数 传递 不 同 的 参数 ， 这 样 就 可 以 多 次 调用 抽象 化 )， 代 码 如 下 : 
function switchSkin(skinName){ 
("#"+skinName).addClass("selected") wa < | 
.Siblings().removeClass("selected"); AO 
("#cssfile").attr( "href","css/"+ skinName +" CSS sa ah a or ial 
.Cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); 
| 
然后 在 单 击 事件 和 if (cookie_skin) { } 内 分 别 调用 对 应 的 参数 : 


050 jQuery00000000000000 


SwilltelSknn has de 
Ds 
var cookie skin = $.cookie( "MyCssSkin"); 
if (cookie skin) { 
switchSkin( cookie skin ); 
} 
bs 


至 此 ， 网 页 换 肤 功能 就 完成 了 ， 效 果 如 图 5-39 所 示 。 








四 国 国 站 


0 5-39 000000 











区 #00 


本 章 以 jQuery 对 表单 和 表格 的 一 些 常 用 操作 为 例 ， 介 绍 了 从 最 基本 的 文本 框 得 到 和 失去 焦点 
到 表单 验证 ， 从 表格 最 基本 的 变色 到 筛选 表格 内 容 ， 最 后 还 列举 了 选项 卡 ， 网 页 换 肤 等 其 他 类型 的 
应 用 。 在 实际 开发 中 ， 相 信 这 些 案例 也 能 为 大 家 帮 上 大 忙 。 
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[| 6o0 JQueryU AjaxUDD 














Ajax 全 称 为 “Asynchronous JavaScript and XML ” (异步 JavaScript 和 XML )， 它 并 不 是 指 一 种 
单一 的 技术 ， 而 是 有 机 地 利用 了 一 系列 交互 式 网 页 应 用 相关 的 技术 所 形成 的 结合 体 。 它 的 出 现 ， 揭 
开 了 无 刷新 更 新 页 面 的 新 时 代 ， 并 有 代替 传统 的 Web 方式 和 通过 隐藏 的 框架 来 进行 异步 提交 的 趋 
势 ， 是 Web 开发 应 用 的 一 个 里 程 碑 。 


E000000 










































































6.1.1 Ajax0 0 0 


l100000000 


Ajax 不 需要 任何 浏览 费 择 件 ， 就 可 以 被 绝 大 多 数 主 流 浏览 器 所 支持 ， 用 户 只 需要 允许 JavaScript 
在 浏览 器 上 执行 即 可 。 























20000000D0 


这 是 Ajax 技术 的 最 大 优点 ， 能 在 不 刷新 整个 页 面 的 前 提 下 更 新 数据 ， 这 使 得 Web 应 用 程序 能 
更 为 迅速 地 回应 用 户 的 操作 。 












































3000 WebUUU00 


与 传统 模式 相 比 ，Ajax 模式 在 性 能 上 的 最 大 区 别 就 在 于 传输 数据 的 方式 ， 在 传统 模式 中 ， 数 
据 提 交 是 通过 表单 (Form) 来 实现 的 ， 而 数据 获取 是 靠 全 页 面 刷 新 来 重新 获取 整 页 的 内 容 。Ajax 
模式 只 是 通过 XMLHttpRequest 对 象 向 服务 器 端 提交 希望 提交 的 数据 ， 即 按 需 发 送 。 
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Ajax 的 工作 原理 相当 于 在 用 户 和 服务 器 之 间 加 了 一 个 中 间 层 ， 使 用 户 操作 与 服务 器 啊 应 异步 
化 。 它 在 客户 端 创建 Ajax 引擎 ， 把 传统 方式 下 的 一 些 服 务 器 负担 的 工作 转移 到 客户 端 ， 便 于 客户 
端 资源 来 处 理 ， 减 轻 服 务 器 和 带宽 的 负担 。 


















































6.1.2 Ajax00D0 


世界 上 并 没有 完美 的 事物 ,同样 Ajax 也 3 




















0 60 jQueryD Ajax0 O00 








上 














I100000 XMLHttpRequestD O000000O 








Ajax 的 不 足 之 一 首先 来 自 于 浏览 器 





| 对 象 《 现 阶段 大 部 分 








支持 XMLHttpRequest 则 更 在 其 
0 量 的 精力 编码 以 兼顾 各 个 浏 
这 使 得 Ajax 开发 的 难度 比 普通 的 Web 

















放 客 














kk 后。 为 了 使 得 Ajax 应 用 能 在 各 个 浏览 器 
览 器 之 间 的 差别 ， 来 让 Ajax 应 | 
开发 高 出 很 多 ， 许 多 程序 员 


不 是 一 项 非常 完美 的 技术 。Ajax 主要 有 以 下 几 点 不 足 之 处 。 


。Jnternet Explorer 在 5.0 及 以 后 的 版 本 才 文 持 XML 








户 端 上 的 下 浏览 器 是 下 6 及 以 上 )，Mozilla、Netscape 等 浏览 



































200000000000”0000000 
在 传统 的 网 页 中 ,用 户 经 常会 习惯 性 的 使 用 浏览 器 自 带 的 “前 进 ” 和 “后 退 ” 




















改变 了 此 Web 浏览 习惯 。 在 Ajax 中 “前 进 ” 和 
的 方法 (添加 锚 点 ) 来 使 得 用 户 可 以 使 用 









































中 正常 运行 ， 程 序 员 必 
用 能 够 很 好 地 兼容 各 个 浏览 
因此 对 Ajax 望 而 生 蔷 。 











按钮 ， 然 而 Ajax 


“后 退 ” 按 钮 的 功能 都 会 失效 ， 虽 然 可 以 通过 一 定 


“前 进 ” 和 “后 退 ” 按 钮 ， 但 相对 于 传统 的 方式 却 麻 烦 了 














很 多 ， 对 于 大 多 数 程序 员 来 说 宁可 放弃 月 























『 进 、 








然而 ， 对 于 用 户 来 说 ， 他 们 经 常会 














想 这 样 做 ， 接 着 就 去 加 惯性 地 单刀 
























































了 先前 的 一 个 页 面 ， 通 过 Ajax 交互 得 到 的 内 容 完全 消失 了 。 














3000000000000 


对 于 搜索 引擎 的 支持 也 是 Ajax 的 一 项 



























































后 退 的 功能 ， 也 不 愿意 在 索 琐 的 逻辑 中 去 处 理 该 问题 。 
人 页 到 这 种 情况 ， 当 单 击 一 个 按钮 触发 一 个 Ajax 交互 后 又 觉得 不 
击 “ 后 退 ” 按 钮 ， 结 果 发 生 了 最 不 愿意 看 到 的 结果 ， 浏 览 嚣 后退 到 


缺憾 。 通 常 搜索 引擎 都 是 通过 爬虫 程序 来 对 互联 网 上 的 数 以 






































亿 计 的 海量 数据 来 进行 搜索 整理 的 , 然而 聆 虫 程序 现在 还 不 能 理解 那些 奇怪 的 JavaScript 代码 和 因此 引 

















起 的 页 面 内 容 的 变化 ， 这 使 得 应 用 








400000000000 























Ajax 的 站 点 在 网 络 推广 上 相对 于 传统 站 点 明显 处 于 劣势 。 


JavaScript 是 Ajax 的 重要 组 成 部 分 
很 多 Web 开发 者 对 JavaScript 望 而 生 垦 ， 这 对 于 编写 Ajax 代码 就 更 加 困难 了 。 同 时 ， 目 前 许多 Web 





























对 Ajax 的 应 用 。 


开发 者 已 经 习惯 使 用 可 视 化 的 工具 ， 对头 


























， 在 目前 ， 由 于 缺少 很 好 的 JavaScript 开发 和 调试 工具 ， 使 













































































自动 手 编写 代码 有 旦 惧 感 ， 这 也 在 一 定 程度 上 影响 了 大 家 








加 轩 门 本 姑 WhetOekAY] 


Ajax 的 核心 是 XMLHttpRequest 对 象 ， 它 是 Ajax 实现 的 关键 一 一 发 送 异步 i 
执行 回调 都 是 通过 它 来 完成 的 。XMLHttpRequest 对 象 最 早 是 在 Microsoft Internet Explorer 5.0 
ActiveX 组 件 中 被 引入 的 ， 之 后 各 大 浏览 器 厂商 都 以 JavaScript 内 置 对 象 的 方式 来 实现 





























请 求 、 接 收 啊 应 及 
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XMLHttpRequest 对 象 。 虽 然 大 家 对 它 的 实现 方式 有 所 区 别 ， 但 是 绝 大 多 数 浏览 器 都 提供 了 类 似 的 
属性 和 方法 ， 而 且 在 实际 脚本 编写 方法 上 的 区 别 也 不 大 ， 实 现 得 到 的 效果 也 基本 相同 。 目 前 W3C 
组 织 正 致力 于 制定 一 个 各 浏览 器 厂商 可 以 统一 遵照 执行 的 XMLHttpRequest 对 象 标 准 ， 用 来 推进 
Ajax 技术 的 推广 与 发 展 。 


XMLHttpRequest 对 象 提供 了 一 个 相对 精简 易 用 的 API， 本 书 在 附录 C 中 进行 了 详细 介绍 ， 读 
者 可 以 自行 查看 。 


EB 0 0 *#80 0 一 :oaG 


由 于 讲解 后 面 的 Ajax 方法 需要 与 Web 服务 器 端 进行 交互 ， 因 此 这 里 将 引用 一 个 工具 包 一 一 
AppServ， 它 是 PHP 网 页 架 站 工具 组 合 包 ， 能 够 帮助 初学 者 快速 完成 网 页 架 站 。AppServ 所 包含 的 
软件 有 Apache、Apache Monitor、PHP、MySQL、PHP-Nuk 和 phpMy Admin。 










































































































































































10 UD AppServ 


下 载 地 址 为 : http://www.appservnetwork.com。 





2000 AppServ 

安装 AppServ 非常 简单 ， 只 要 连续 轻松 地 单 击 “Next” 按 钮 ， 输 入 网 址 、 电 子 邮箱 、 密 码 等 常 
用 信息 即 可 。 端 口 默认 为 80， 当 然 也 可 以 在 安装 时 进行 修改 。 

300000000 


将 本 书 提供 的 示例 程序 复制 到 安装 好 后 的 AppSerwwww 文件 夹 中 ， 然 后 在 地 址 栏 输入 
“http:WlocalhosVCh6/php/” 即 可 显示 图 6-1 所 示 的 页 面 。 



























































Index of /Ch6/php 


Name Last modified SizeDescription 








Parent Directory a 
团 demol-javascripty 09-Feb-2012 12:54 


国 demo2-1oad/ 09-Feb-2012 12:54 = 
转 demo3-get/ 09-Feb-2012 12:54 
转 demod4-posty/ 09-Feb-2012 12:54 =- 
国 demo5-getScriptJSONX 09-Feb-2012 12:54 一 
国 demo6-ajax/ 09-Feb-2012 12:54 


demoT-serialize 0/ 09-Feb-2012 12:54 - 
[| demoB8-Aiaxbvent/ 09-Feb-2012 12:54 
国 demo9-chat/ 09-Feb-2012 12:54 一 





Apache/2 2 8 (Win32) PHP/S. 2 6 Server at localfost Port 80 


0 6-1 AppServD 0 Ajax0O0 


0 60 jQuery0U Ajax00 











EU 














Ff 相应 文件 夹 ， 选 定 HTML 页 面 ， 即 可 运行 相应 的 Ajax 示例 。 





: 本 书 还 提供 了 另外 两 种 主流 语言 JSP 和 ASP 编写 的 对 应 的 示例 程序 ， 读 者 可 以 自行 配置 相 
应 环境 进行 测试 和 学 习 。 





E000 “0 wu00 




















在 正式 接触 jQuery 的 Ajax 操作 之 前 ， 先 看 一 个 用 传统 的 JavaScript 实现 的 Ajax 例子 。 例 子 描 


































































































述 : 单 击 一 个 按钮 ， 然 后 通过 传统 的 JavaScript 的 Ajax 的 方式 从 服务 器 端 取 回 一 个 “Hello Ajax!” 
的 字符 串 并 显示 在 页 面 上 。 
先 在 前 台 页 面 中 书写 HTML 代码 ， 代 码 如 下 : 





A 


input type="button” Values' Ajax 品目”onclicks' Ajax() ”7/> 
<div id="resText” ></div> 




















<button> 按 钮 用 来 触发 Ajax，id 为 “resText” 的 元 素 用 来 显示 从 服务 器 返回 的 HTML 文本 。 
接 下 来 的 任务 就 是 完成 Ajax0 函 数 ， 实 现 步骤 如 下 。 
(1) 定义 一 个 函数 ， 通 过 该 函数 来 异步 获取 信息 ， 代 码 如 下 : 














function Ajax(){ 
Wa 


} 

(2) 声明 一 个 空 对 象 用 来 装 入 XMLHttpRequest 对 象 ， 代 码 如 下 : 
var xmlHttpReq = null; 

(3) 给 XMLHttpRequest 对 象 赋值 ， 代 码 如 下 : 


if (window.ActiveXObject){ //IE 5 IE 600 ActivexobjectDDD 
//D 0 XMLHttpRequest0 O00O 
xmlHttpReg = new Active XObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest){ al Wes MES Na og 
//XMLHttpRequest 0 windowDDDD 
xmlHttpReq = new XMLHttpRequest(); /VODDODOD XMHttpRequest 00 


= 





} 


IE 5、IE 6 是 以 ActiveXObject 的 方式 引入 XMLHttpRequest 对 象 的 ， 而 其 他 浏览 器 的 XML 





HttpRequest 对 象 是 window 的 子 对 象 。 











(4) 实例 化 成 功 后 ， 使 用 open0 方 法 初始 化 XMLHttpRequest 对 象 ， 指 定 HTTP 方法 和 要 使 用 
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000 jQuery0 0 2[ 避 


的 服务 器 URL， 代 码 如 下 : 


xmlHttpReq.open( "GET"," 


默认 情况 下 ， 使 用 XMLHttpRequest 对 和 象 发 送 的 HTTP 请 求 是 
async 参数 设置 为 ttue， 如 | 


























(5) 因为 要 做 一 
器 当 它 的 readyState 值 改变 时 
可 以 使 用 onreadystatechange 属性 来 注 


个 异步 








test.php" ,true): 





ei 


上 面 代码 所 示 。 


个 异步 调用 ， 所 以 需要 注册 一 个 XMLHttpRequest 对 象 将 调用 的 回调 事件 处 理 
| 调用 。 当 readyState 值 
EE 册 该 回 


























被 改变 时 ， 
调 事件 处 理 器 ， 代 码 如 下 : 


会 激发 一 

















xmlHttpReq.onreadystatechange=RequestCallBack; /0DDOO0ODOD 


(6) 使 用 send(0) 方 法 发 送 该 请 求 ， 
指定 参数 或 使 用 null 参数 的 情况 下 调用 


Xml] 











当 请 











HttpReq.Send(Cnul1) ; 








/D0 








此 ， 在 处 理 











该 响应 2 





前 ， 事 件 处 





(readyState 




















来 处 理 该 响 


1 





} 


最 后 ， 如 果 单 避 
如 


就 是 实现 XMLHttpRequest 对 象 使 ) 
下 的 所 有 内 容 都 发 送 到 服务 器 ， 而 是 按 需 发 送 。 使 用 














Ajax 调用 。 


以 上 



































个 请 求 并 处 


‘a 





里 相应 的 返 








的 模式 能 给 网 


入 门 Ajax 的 人 来 说 ， 似 乎 


幸运 的 是 ，jQuery 提供 了 
用 jQuery 开发 Ajax 将 变 得 极其 简单 。 
了 些 繁琐 的 XMLHttpRequest 对 象 。 下 面 




















Fi 需要 理会 姑 








大 





为 这 个 请 











006ET 





4){ 





if(xmlHttpReq.status == 200){ 
/加 xmlHttpReq.responseTextDDODOD id0 resText[00O0 
document .getElementById("resText").innerHIML= xmlHttp Req.responseText:; 





图 6-2 所 示 。 








站 带 来 更 好 的 用 户 











Ff“Ajax 提交 ”按钮 后 发 现 网 页 J 




















求 状态 改变 时 ，XMLHttpRequest 对 象 调用 onreadystatechange 属性 注册 的 事 
理 器 应 该 首先 检查 readyState 的 值 


























异步 进行 的 ， 但 是 可 以 显 式 地 把 





个 readystatechange 事件 ， 


青 求 使 用 的 是 HTTP 的 GET 方式 ， 所 以 可 以 在 不 
send() 方 法 ， 代 码 如 下 : 





和 可 四 站 如 四 




















牛 处 理 占 。 因 | 











和 HTTP 状态 。 当 请 求 完成 加 载 





值 为 4) 并 且 响 应 已 经 成 功 (HTTP 状态 值 为 200) 时 ， 就 可 以 调 
应 内 容 ， 代 码 如 下 : 


unction RequestCallBack(){//D 0 readystate0 O000000000 
if(xmlHttpReq.readyState == 





的 所 有 


上 出 现 了 “Hello Ajax!”， 


纪 




















回 值 ， 然 后 使 用 浏览 器 的 DOM 方法 更 新 页 面 ! 





体验 。 但 是 








并 不 是 个 容易 





的 过 程 。 





上 5 



































常 开 
这 样 


是 XMLHttpRequest 对 象 的 4 


发 中 需要 的 快捷 操作 ， 





节 ， 它 不 必 将 Web 
] JavaScript 启动 一 























一 个 JavaScript 函数 





12 








下 


那么 就 完成 了 第 














Hello 有 二; 


06201I0Aax00 























的 
民 多 





例如 load、 


数据 。 显 然 ， 这 种 无 刷新 
属性 和 方法 ， 对 于 想 快 速 








ajax、get 和 post 等 ， 使 

















开 

















生发 人 员 就 可 以 将 程序 开发 集中 在 
召 jQuery 中 的 Ajax。 








始 介 和 





E 业 务 和 用 户 体验 上 , 而 不 














洒 440 [安放 





0 60 jQueryD Ajax0O0D 























jQuery 对 Ajax 操作 进行 了 封装 ， 在 jQuery 中 $.ajax0 方 法 属于 最 底层 的 方法 ， 第 2 层 是 load0、 
$.get0 和 $.post() 方 法 ， 第 3 层 是 $.getScript0 和 $.geUSON(U 方 法 。 首 先 介绍 第 2 层 的 方法 ， 因 为 其 使 








用 频率 很 高 。 


6.5.1 load(0 口 


IUDOOUHTMLDOD 






































load() 方 法 是 jQuery 中 最 为 简单 和 常用 的 Ajax 方法 ， 能 载 入 远程 HTML 代码 并 插入 DOM 中 。 


它 的 结构 为 : 


loadmummdataln Neale 








load() 方 法 参数 解释 如 表 6-1 所 
表 6-1 


不 。 











load() 方 法 参数 解释 









































参数 名 称 类 型 说 明 
url String 请 求 HTML 页 面 的 URL 地 址 
data (可 选 ) Object 发 送 至 服务 器 的 key/value 数据 
callback (可 选 ) Function 请 求 完 成 时 的 回调 函数 ， 无 论 请 求 成 功 或 失败 
和 先 构 建 一 个 被 load0) 方 法 加 载 并 追加 到 页 面 中 的 HTML 文件 ， 名 字 为 test.html，HTML 代码 


如 下 : 


<div class="comment"> 

<h6>[D 0 :</h6> 

<p class="para">0 0 .</p> 
</div> 





<div class="comment "> 

<h6>0 0 :</h6> 

<p class="para">0 0 .</p> 
</div> 
<div class="comment"> 

<h6>[D 0 :</h6> 

<p class="para">0 0 .</p> 
</div> 


然后 新 建 一 个 空白 页 面 ， 在 上 面 












































添加 

















两 个 元 素 : <button> 按 钮 用 来 触发 Ajax 事件 ，id 为 “resText” 


的 元 素 用 来 显示 追加 的 HTML 内 容 。HTML 代码 如 下 : 
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<input type="button” id="send” value="Ajax[ 虽 OO" /> 
<div classs comment > 品目 加 加 :</div> 
<div id="resTlext” ></div> 





接 








站 来 就 可 以 用 
按钮 来 调用 loadO 方 沪 








jQuery 代码 如 下 : 


$(function(){ 
$("#send").click(function(){ 
$("#resText").1oad("test.html"):; 


3 
DE 


当 按钮 被 单 击 后 ， 
显然 ,load() 方 法 完成 了 原本 很 楷 琐 的 工作 。 开 发 人 员 只 需要 使 有 











指定 目标 位 置 

















testhtml 页 面 

















F 始 编写 jQuery 代码 了 。 等 DOM 元 素 加 载 完 毕 后 ， 通 过 单 击 id 为 “send” 的 
E， 然 后 将 test.html 的 内 容 加 载 到 id 为 “resText” 的 元 素 里 。 









































出 现 良 























6-3 所 示 的 界面 。 
































日 jQuery 选择 器 为 HTML 片段 











， 然 后 将 要 加 载 的 文件 的 URL 作为 参数 传递 给 load(0) 方 法 即 可 。 当 单 击 按钮 后 ， 
的 HTML 内 容 就 会 被 加 载 并 插入 主页 面 <div id="resText"></div> 的 元 素 中 。 





























:土生 
壮 忆 : 


test.html 页 面 里 并 没有 添加 样式 ， 但 现在 加 载 的 内 容 有 样式 了 。 这些 样式 是 在 主页 面 中 添加 


的 ， 即 主页 面相 应 的 样式 会 立即 应 用 到 新 加 载 的 内 容 上 。 

















































































































20000 HTML 
上 个 例子 是 将 test.html 页 面 中 的 内 容 都 加 载 到 id 为 “resText” 的 元 素 里 。 如 果 只 需要 加 载 
test.html 页 面 内 的 某 些 元 素 ， 那 么 可 以 使 用 load0) 方 法 的 URL 参数 来 达到 目的 。 通 过 为 URL 参数 











指定 选择 符 ， 


load0) 方 法 的 URL 参数 的 语法 结构 为 : "url selector"。 注 意 ，URL 和 选择 器 之 间 有 


口 


> 





例如 


$("#resText").1oad("test.html 





就 可 以 很 方便 地 从 加 载 过 来 


需要 加 载 test.html 页 面 


运行 效果 如 图 6-4 所 示 。 


300D0 





D0 





l0ad0 方 法 的 传递 方式 根据 参数 data 来 自动 指定 。 如 果 没 有 参数 传递 ， 则 采用 
自动 转换 为 POST 方式 。 关 于 GET 和 POST 传递 方式 的 





反之 ， 则 会 





锡 攻 三 三 碍 右 可 加 [到 
$("#resText").1oad("test.php",function(){ 

















的 HTML 文档 里 筷 选 出 所 需要 的 内 容 。 





























i 中 class 为 “para” 的 内 容 ， 可 以 使 用 








如 下 代码 来 完成 : 








Davao 














GET 方式 传递 ; 
区 别 ， 将 在 后 面 进行 讲解 。 
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ps 
ys 
证 轩 加 轩 加 OST 
$("#resText").1load("test.php", {name: "rain", age: "22"},function(){ 























Wa 
DD 
Ajax 获 取 
已 有 评论 : 
张 三 : 
李 由 : 
板 甘 
ajax 获取 
板 营 . 
地 板 地 板 
0 6-3 load0D00000 D6-4 0 loadd)0000000 (HMOO 
40DDD000 

















对 于 必须 在 加 载 完成 后 才能 继续 的 操作 ，load(0) 方 法 提供 了 回调 函数 〈callback)， 该 函数 有 3 
个 参数 ， 分 别 代表 请 求 返回 的 内 容 、 请 求 状 态 和 XMLHttpRequest 对 象 ，jQuery 代码 如 下 : 














$("#resText").1load("test.html" , function (responseText, textStatus, XMLHttpRequest){ 














// responseText : 于 
// textStatus : D0000D successd errorDO notmodifiedD timeout 40 
// XMLHttpRequest : XMLHttpRequest 口 口 


be 





注意 : 在 load() 方 法 中 ,无 论 Ajax 请 求 是 否 成 功 , 只 要 当 请 求 完 成 ( complete ) 后 , 回调 函数 ( callback ) 
就 被 触发 。 对 应 下 面 将 介绍 的 $.ajax() 方 法 中 的 complete 回调 函数 。 





6.5.2 $.getOD 0 0 $.post00 0 





























load() 方 法 通常 用 来 从 Web 服务 器 上 获取 静态 的 数据 文件 ， 然 而 这 并 不 能 体现 Ajax 的 全 部 价 
值 。 在 项 目 中 , 如 果 需 要 传递 一 些 参数 给 服务 器 中 的 页 面 , 那么 可 以 使 用 $.get0 或 者 $.post0 方 法 (或 
者 是 后 面 要 讲解 的 $.ajax() 方 法 )。 






























































注意 : $.get0 和 $.post0 方 法 是 jQuery 中 的 全 局 函数 ， 而 在 此 之 前 讲 的 jQuery 方法 都 是 对 jQuery 对 
象 进行 操作 的 。 
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10 $.get()0 0 

$.get0 方 法 使 用 GET 方式 来 进行 异步 请 求 。 
它 的 结构 为 : 

So unl LL taradl [ cal L, wie ) 


$.get() 方 法 参数 解释 如 表 6-2 所 示 。 







































































表 6-2 $.get() 方 法 参数 解释 
参数 名 称 类 型 说 明 
url String 请 求 的 HTML 页 的 URL 地 址 
data〈 可 选 ) Object 发 送 至 服务 器 的 key/value 数据 会 作为 QueryString 附加 到 请 求 URL 中 
callback (可 选 ) Function 载 入 成 力 时 加 调 函 数 《只 有 当 Sbons 的 返回 状态 是 success 才 调 用 该 
方法 ) 自动 将 请 求 结果 和 状态 传递 给 该 方法 
type《〈 可 选 ) String 服务 器 端 返回 内 容 的 格式 ， 包 括 xml、 html、 script、 json、text 和 _default 






































下 面 是 一 个 评论 页 面 的 HTML 代码， 通过 该 段 代 码 来 介绍 $.getO 方 法 的 使 用 。 








<form id="forml” action="#"> 
<p>0 0 :</p> 
<p>0 0 : <input type="text" name="username” id="Username” /></p> 
<p>0 0 : <textarea name="content" id="content” rows="2” cols="20"> </textarea></p> 
<p><input type="button” id="send” value="[| 0 "/></p> 
</form> 
<div class="'comment'>3 吕 日 虽 旧 </div> 
<div id="resText"” > 
</div> 


本 有 段 代码 将 生成 图 6-5 所 示 的 页 面 。 
将 姓名 和 内 容 填 写 好 后 ， 就 可 以 准备 提交 评论 了 。 如 图 6-6 所 示 。 




































































陋 座 : Fi: 
隆 名 : 姓名 了 张 三 
沙发 . 
内 容 : 内 容 : 
提交 ] 
Ee: 已 有 评论 : 
065 0000000 066 00000 











(1) 使 用 参数 


9 先 ， 需 要 确定 请 求 页 面 的 URL 地 址 。 代 码 如 下 : 
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二 上 - 0D 60 jQuery0 Ajax0 00 


$("#send").click(function(){ 
$.get( "getl.php" a 


js 
然后 ， 在 提交 之 前 ， 需 要 获取 “姓名 ”和 “内 容 ” 的 值 作为 data 参数 传递 给 后 


es 
品 。 








代码 如 下 : 


$("#send").click(function(){ 
$.get( "getl.php" , { 
username : $("#username").val() ， 
content : $("#content").val() 
四 加 四 可 二 
人 
如 果 服 务 器 端 接收 到 传递 的 data 数据 并 成 功 返 回 ， 那 么 就 可 以 通过 回调 函数 将 返回 的 数据 显 
示 到 页 面 上 


$.get0 方 法 的 回调 函数 只 有 两 个 参数 ， 代 码 如 下 : 

































































function (data, textStatus){ 
Wola [MAS ON 
// textStatus : 00000D successd errord notmodifiedD timeout 4 














口 


} 

data 参数 代表 请 求 返回 的 内 容 ，textStatus 参数 代表 请 求 状态 ， 而 且 
返回 〈success) 后 才 被 调用 ， 这 点 与 load0) 方 法 不 一 样 。 

(2) 数据 格式 

服务 器 返回 的 数据 格式 可 以 有 多 种 ， 它 们 都 可 以 完成 同样 的 任务 。 以 下 是 几 种 返回 格式 的 
对 比 。 


昌 HTML 片段 











| 

















调 函 数 上 只 有 当 数 据 成 功 















































由 于 服务 器 端 返回 的 数据 格式 是 HTML 片段 ， 因 此 并 不 需要 经 过 处 理 就 可 以 将 新 的 HTML 数 
据 插 入 到 主页 面 中 。jQuery 代码 如 下 : 












































$(function(){ 
$("#send").click(function(){ 
$.get("getl.php”, { 
username : $("#username").val(), 
content : $("#content").val() 
}, function (data, textStatus){ 
$("#resText").html(data); /DOO0000000000 


eo 
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by 
用 


HTML 片段 实现 起 来 只 需要 很 少 的 工作 量 ， 但 这 种 固定 的 数据 结构 并 不 一 定 能 够 在 其 他 的 Web 



























































mm | 
经 介绍 过 jQuery 强大 的 DOM 处 理 能 力 ， 处 理 XML 文档 与 处 理 HTML 文档 一 样 ， 也 可 以 使 用 常 


程序 中 得 到 重用 。 











昌 XML 文档 






































由 于 服务 器 端 返回 的 数据 格式 是 XML 文档， 因此 需要 对 返回 的 数据 进行 处 理 ， 前 面 的 半 市 i 































































































规 的 attr0、find0、filterO 以 及 其 他 方法 。jQuery 代码 如 下 : 


$(function(){ 
$("#send").click(function(){ 
$.get("get2.php", { 
username : $("#username").val(), 
content : $("#content").val() 
}, function (data, textStatus){ 
var username = $(data).find("comment").attr("username"); 
var content = $(data).find("comment content").text(); 
var txtHtml = "<div class="'comment'><h6>" 
+USername+" :</h6><p class='para >" 
+content+"</p></div>"; 
$("#resText").html (txtHtml); /O00000000000 
oR 


数据 格式 为 XML 文档 的 过 程 实现 起 来 比 HTML 片段 要 稍微 复杂 些 , 但 XML 文档 的 可 移 


何 | 








返 

















植 性 是 其 他 数据 格式 无 法 比拟 的 ， 因 此 以 这 种 格式 提供 的 数据 的 重用 性 将 极 大 提高 。 例 如 delicio.us 
(http://del.icio.us )，Flickr (http://flickr.com) 和 某 些 开放 平台 都 是 以 XML 格式 输出 数据 ， 读 者 可 以 









































利用 











它们 提供 的 API， 将 获得 的 内 容 整合 到 自己 的 网 站 中 〈Mashup 应 用 )。 不 过 ，XML 文档 体积 











相对 较 大 ， 与 其 他 文件 格式 相 比 ， 解 析 和 操作 它们 的 速度 要 慢 一 些 。 








注意 : 由 于 期 待 服务 器 端 返回 的 数据 格式 是 XML 文档 ， 因 此 需要 在 服务 端 设置 Content-Type 类 型 ， 


代码 如 下 : 
header("Content-Type:text/xml; charset=utf-8"); // php 





昌 。 ”JSON 文件 
之 所 以 会 出 现 这 种 数据 格式 的 文件 ， 很 大 程度 上 是 因为 XML 文档 体积 大 和 难以 解析 。JSON 




















文件 和 XML 文档 一 样 ， 也 可 以 方便 的 被 重用 。 而 且 ，JSON 文件 非常 简洁 ， 也 容易 阅读 。 想 了 解 
更 多 的 JSON 文档 知识 ， 可 以 访问 http:/json.org/ 网 址 。 




















0 60 jQueryD Ajax00D 




















由 于 服务 器 端 返回 的 数据 格式 是 JSON 文件 ， 因 此 需要 对 返回 的 数据 进行 处 理 之 后 ， 才 可 以 将 








新 的 HTML 数据 添加 到 主页 面 中 。jQuery 代码 如 下 : 


$(function(){ 
$("#send").click(function(){ 
SS oo | 
username : $("#username").val(), 
content : $("#content").val() 
}, function (data, textStatus){ 
var username = data.username; 
var content = data.content; 
var txtHtml = "<div class="'comment'><h6>" 
+USername+" :</h6><p class='para'>" 
+content+"</p></div>"; 
$("#resText").htmi(txtHtml); /OOO0O000000000 
eS OM 


人 























在 上 面 的 代码 中 ， 将 $.get0 方 法 的 第 4 个 参数 (type) 设置 为 “json” 来 代表 期 待 服务 器 端 返 巨 





的 数据 格式 。 



































注意 : (1) 在 不 远 的 将 来 ， 新 版 的 JavaScript 中 XML 将 会 和 JSON 一 样 容易 解析 ， 相 信 到 时 候 通 
用 且 容 易 解 析 的 XML 将 会 成 为 主流 的 数据 交换 格式 。 不 过 在 它 到 来 之 前 ，JSON 依然 有 很 


强 的 生命 力 。 


(2) JSON 的 格式 非常 严格 ， 构 建 的 JSON 文件 必须 完整 无 误 ， 任 何 一 个 括号 的 不 匹配 或 者 
缺少 过 号 ， 都 会 导致 页 面 上 的 脚本 终止 运行 ， 甚 至 还 会 带 来 其 他 更 加 严重 的 负面 影响 。 比 
如 ， 我 们 返回 的 数据 都 必须 要 有 双 引 号 ， 必 须 是 : { "username" : " 张 三 " }， 而 不 能 是 : 


{ username: " 张 三 " }。 


























以 上 3 种 返回 方式 都 可 以 达到 图 6-7 所 示 的 效果 。 上 





通过 对 3 种 数据 格式 的 优 缺 点 进行 分 析 ， 可 以 得 知 在 不 需 




































































文件 是 不 错 的 选择 ， 它 在 性 能 和 文件 大 小 方面 具有 优势 ， 而 当 


远程 应 用 程序 未 知 时 ，XML 文档 是 明智 的 选择 ， 它 是 Web 服 


























容 : 


要 与 其 他 应 用 程序 共享 数据 的 时 候 , 使 用 HTML 片段 来 提供 返 
回 数据 一 般 来 说 是 最 简单 的 ， 如 果 数 据 需 要 重用 ， 那 么 JSON 已 有 评论 : 


张 三 : 


小 发. 





务 领 域 的 “世界 语 ”。 具 体 选择 哪 种 数据 格式 ， 并 没有 严格 的 规 























Xl 


定 ， 读 者 可 以 根据 需求 来 选择 最 适合 的 返回 格式 来 进行 开发 。 
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20 $.post() 
它 与 $.get(0 方 法 的 结构 和 使 用 方式 都 相同 ， 不 过 它们 之 间 仍 然 有 以 下 区 别 。 


加 ”GET 请 求 会 将 参数 跟 在 URL 后 进行 传递 , 而 POST 请求 则 是 作为 HTTP 消息 的 实体 内 容 
发 送 给 Web 服务 器 。 当 然 ， 在 Ajax 请 求 中 ， 对 用 户 是 不 可 见 的 。 

加 ”GET 方式 对 传输 的 数据 有 大 小 限制 (通常 不 能 大 于 2KB ), 而 使 用 POST 方式 传递 的 数据 
量 要 比 GET 方式 大 得 多 (理论 上 不 受 限 制 )。 

加 ”GET 方式 请 求 的 数据 会 被 浏览 器 缓存 起 来 ， 因 此 其 他 人 就 可 以 从 浏览 器 的 历史 记录 中 读 
取 到 这 些 数据 ， 例 如 账号 和 密码 等 。 在 某 种 情况 下 ，GET 方式 会 带 来 严重 的 安全 性 问题 ， 而 POST 
方式 相对 来 说 就 可 以 避免 这 些 问题 。 

加 GET 方式 和 POST 方式 传递 的 数据 在 服务 器 端的 获取 也 不 相同 。 在 PHP 中 ，GET 方式 的 
数据 可 以 用 $_GETI[] 获 取 ， 而 POST 方式 可 以 用 $ POST 获取 。 两 种 方式 都 可 以 用 $_ REQUESTI] 
来 获取 。 


由 于 POST 和 GET 方式 提交 的 所 有 数据 都 可 以 通过 $ REQUEST 来 获取 ， 因 此 只 需要 改 
jQuery 函数 ， 就 可 以 将 程序 在 GET 请 求 和 POST 请 求 之 间 切 换 。 代 码 如 下 : 


















































时 
六 
2 




















$(function(){ 
$("#send").click(function(){ 
apostle posteinhp 
username : $("#username").val(), 
content : $("#content").val() 
}, function (data, textStatus){ 
$("#resText").append(data); /D00000000000 

















另外 ， 当 load0 方 法 带 有 参数 传递 时 ， 会 使 用 POST 方式 发 送 请 求 。 因 此 也 可 以 使 用 load0 方 
法 来 完成 同样 的 功能 。 代 码 如 下 : 


$(function(){ 
$("#send").click(function(){ 
$("#resText").1oad("post1.php",{ 
username : $(" 加 sername").val() ， 
content : $("#content").val() 








)) 


}) 


上 面 使 用 load0、$.get0 和 $.postO0 方 法 完成 了 一 些 常规 的 Ajax 程序 ， 如 果 还 需要 编写 一 些 复 杂 
的 Ajax 程序 ， 那 么 就 要 用 到 jQuery 中 的 $.ajax0 方 法 。$.ajax0 方 法 不 仅 能 实现 与 load0、$.get0 和 
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$.post() 方 法 同样 的 功能 ， 而 且 还 可 以 设 定 beforeSend (提交 前 回调 函数 )、error (请 求 失 败 后 处 理 )、 
success〔 请 求 成 功 后 处 理 ) 以 及 complete( 请 求 完成 后 处 理 ) 回调 函数 ， 通 过 这 些 回 调 函 数 ， 可 以 
给 用 户 更 多 的 Ajax 提示 信息 。 男 外 ， 还 有 一 些 参数 ， 可 以 设置 Ajax 请 求 的 超时 时 间或 者 页 面 的 “最 
后 更 改 ” 状 态 等 。 关 于 $.ajax0 方 法 将 在 后 面 的 章节 中 进行 讲解 。 

















































































































6.5.3 $.getScriptOU 0 0 $.getl sonO0 0 


10 $.gets cript() 











有 了 时候， 在 页 面 初次 加 载 时 就 取得 所 需 的 全 部 JavaScript 文件 是 完全 没有 必要 的 。 虽然 可 以 在 
需要 哪个 JavaScript 文件 时 ， 动 态 地 创建 <script> 标 签 ，jQuery 代码 如 下 : 






































$(document .createElement("script")).attr("src", "test.js").appendTo( "head"); 
或 者 
$("<script type='text/javascript' src='test.js'/>").appendTo("head"); 


但 这 种 方式 并 不 理想 。 为 此 ，jQuery 提供 了 $.getScript0 方 法 来 直接 加 载 .js 文件 ， 与 加 载 一 个 
HTML 片段 一 样 简单 方便 ， 并 且 不 需要 对 JavaScript 文件 进行 处 理 ，JavaScript 文件 会 自动 执行 。 


jQuery 代码 如 下 : 
























































$(function(){ 
$('#send').click(function() { 
$.getScript('test. js'); 
)3 
几 


当 “ 加 载 ” 按 钮 被 单 击 后 ， 出 现 如 图 6-8 所 示 的 效果 。 





























D 6-8 $.getScript(test.js)00O00000 
与 其 他 Ajax 方法 一 样 ，$.getScript0) 方 法 也 有 回调 函数 ， 它 会 在 JavaScript 文件 成 功 载 入 后 运 
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行 。 例 如 想 载 入 jQuery 官方 颜色 动画 插件 (jquery.color.js )， 成 功 后 给 元 素 绑 定 颜色 变化 动画 ， 就 
可 以 用 到 $.getScript0 方 法 的 回调 函数 。 代 码 如 下 : 
























































(function(){ 
$.getSscript('jquery.color.js',function(){ 
$("#g0").click(function(){ 
$(".block").animate( { backgroundColor: 'pink' }, 1000) 
.animate( { backgroundColor: 'blue' }, 1000); 


的 有 
De 


当 jquery.colorjjs 动画 插件 加 载 完 毕 后 ， 单 击 id 为 “go” 按 钮 时 ，class 为 block 的 元 素 就 有 了 
颜色 动画 变化 。 





















































20 $.9et} SON'() 




















$.getJSON0) 方 法 用 于 加 载 ISON 文件 ， 与 $.getScript(O 方 法 的 用 法 相同 。 
jQuery 代码 如 下 : 


$(function(){ 
$('#send').click(function() { 
$.getJSON( ' test.json ' ); 
}) 


当 单 击 “ 加 载 ” 按 钮 后 ， 网 页 上 看 不 到 任何 效果 。 虽 然 函 数 加 载 了 JSON 文件 ， 但 是 并 没有 告 
诉 JavaScript 对 返回 的 数据 如 何 处 理 。 为 此 ，jQuery 提供 了 回调 函数 ， 在 回调 函数 里 处 理 返 回 的 数 
据 。 代 人 码 如 下 : 



















































































$(function(){ 
$('#send').click(function() { 
$.getJSON('test. json', function(data) { 
// data : 返回 的 数据 
}e)s 











可 以 在 函数 中 通过 data 变量 来 遍历 相应 的 数据 ， 也 可 以 使 用 迭代 方式 为 每 个 项 构建 相应 的 
HTML 代码 。 虽 然 在 这 里 可 以 使 用 传统 的 for 循环 来 实现 ， 但 既然 是 讲解 jQuery， 那 么 还 是 使 用 
jQuery 里 的 方法 。jQuery 提供 了 一 个 通用 的 遍历 方法 $.eachO0， 可 以 用 于 边 历 对 象 和 数组 。 


$.each0) 函 数 不 同 于 jQuery 对 象 的 each0 方 法 ， 它 是 一 个 全 局 函数 ， 不 操作 jQuery 对 象 ， 而 是 
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以 一 个 数组 或 者 对 象 作为 第 1 个 参数 ， 以 一 个 回调 函数 作为 第 2 个 参数 。 回 
第 1 个 为 对 象 的 成 员 或 数组 的 索引 ， 第 2 个 为 对 应 变量 或 内 容 。 代 码 如 下 : 











$(function(){ 
$('#send').click(function() { 
$.getJSON('test.json', function(data) { 

$('#resText' ).empty(): 

var html = " 

$.each( data , function(commentIndex, comment) { 

html += '<div class="comment"><h6>" 

+ comment['username'] + ':</h6><p class="para">" 
+ comment['content'] + “</p></div> ; 

i 

$('#resText').html (htm]) ; 


























jQuery[0 


Aiax0UD0D0 

















调 函 数 拥 有 





两 个 参数 : 
































在 上 面 的 代码 中 ， 当 返回 数据 成 功 后 ， 首 先 清空 id 为 “resText” 的 元 素 的 内 容 ， 以 便 重新 构 








造 新 的 HTML， 然 后 通过 $.eachO 循 环 函 数 依次 过 历 每 个 项 ， 并 将 近 历 出 来 的 内 容 构建 成 HTML 代 





码 拼接 起 来 ， 最 后 将 构建 好 的 HTML 添加 到 id 为 “resText” 的 元 素 中 








o 














当 “ 加 载 ” 按 钮 被 单 击 后 ， 出 现 如 图 6-9 所 示 的 效果 。 








| 如 可 | 


已 有 评论 : 











D 6-9 4.getj5oN(test.jsonJDDODOOD 








不 仅 如 此 ， 还 能 通过 使 用 JSONP 形式 的 回调 函数 来 加 载 其 他 网 站 的 JSON 数据 ， 例 如 从 图 片 


网 站 (http://Flickr.com〉 搜索 汽车 类 别 的 4 张 最 新 图 片 。 代 码 如 下 : 





$(function(){ 
$('#send').click(function() { 
$.getJSON("http://api.flickr.com/services/feeds/ 


photos_public.gne?tags=car&tagmode=any&format=json&jsoncall back=?", 


function(data){ 
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}) 





$.each(data.items, function( i,item ){ 
$("<img class='para' /> ").attr("src", item.media.m ) 
.appendTo( "#resText"); 
if (i==3)f{ 
return false; 


5 


je 






































上 面 的 代码 中 再 次 用 到 全 局 函数 $.each0 来 所 历 数据 ， 因 为 只 需要 4 张 图 片 ， 所 以 当 i=3 的 时 
































候 就 需要 退出 循环 。 在 $.eachO 函 数 中 ， 如 果 需 要 退出 each 循环 ， 只 要 返回 false 即 可 。 



















































































当 “ 加 载 ” 按 钮 被 单 击 后 ， 从 Flickr 网 站 加 载 的 4 张 最 新 的 汽车 图 片 就 会 被 添加 到 页 面 中 。 效 
果 如 图 6-10 所 示 。 
0 610 O00fFlickr00000 
注意 : (1) jQuery 将 自动 把 URL 里 的 回调 函数 ， 例 如 “url?callback=?” 中 的 后 一 个 “2” 替换 为 正 


确 的 函数 名 ， 以 执行 回调 函数 。 

(2) JSONP (JSON with Padding ) 是 一 个 非 官 方 的 协议 ， 它 允许 在 服务 器 端 集成 Script tags 
返回 至 客户 端 ， 通 过 JavaScript Callback 的 形式 实现 跨 域 访问 。 由 于 JSON 只 是 一 种 含有 
简单 括号 结构 的 纯 文 本 ， 因 此 许多 通道 都 可 以 交换 JSON 消息 。 而 由 于 同 源 策 略 的 限制 ， 
开发 人 员 不 能 在 与 外 部 服务 器 进行 通信 的 时 候 使 用 XMLHttpRequest。 而 JSONP 是 一 种 
可 以 绕 过 同 源 策略 的 方法 ， 即 通过 使 用 JSON 与 <script> 标 记 相 结合 的 方法 ， 从 服务 器 端 
直接 返回 可 执行 的 JavaScript 函数 调用 或 者 JavaScript 对 象 目前 JSONP 已 经 成 为 各 大 公 
司 的 Web 应 用 程序 跨 域 首选 ， 例 如 Youtube GData、Google Social Graph、Digg、 豆 闪 、 


Del.icio.us 等 。 





6.5.4 


$.ajax(] 口 


$.ajax() 方 法 是 jQuery 最 底层 的 Ajax 实现 。 


它 的 结构 为 : 


$.ajax(options ) 
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jQuery0 Ajax0 0O0 




























































































































































































































































































































































































// data 可 能 是 xmlDoc、jsonObj、html、text 等 等 














this; /调用 








本 次 Ajax 请 求 时 传递 的 options 参数 


该 方法 只 有 1 个 参数 , 但 在 这 个 对 象 里 包含 了 $.ajax0 方 法 所 需要 的 请 求 设 置 以 及 回调 函数 等 信 
息 ， 参 数 以 key/value 的 形式 存在 ， 所 有 参数 都 是 可 选 的 ， 常 用 参数 如 表 6-3 所 示 。 
表 6-3 $.ajax() 方 法 常用 参数 解释 
参数 名 称 类 型 说 明 
url String (默认 为 当前 页 地 址 〉 发 送 请 求 的 地 址 
ee iri 请 求 方式 (POST 或 GET) 默认 为 GET。 注意 其 他 HTTP 请 求 方法 , 例如 PUT 
YP 3 和 DELETE 也 可 以 使 用 ， 但 仅 部 分 浏览 器 支持 
timeout Number 设置 请 求 超时 时 间 〈 毫 秒 )。 此 设置 将 覆盖 $.ajaxSetup() 方 法 的 全 局 设置 
发 送 到 服务 器 的 数据 。 如 果 已 经 不 是 字符 串 ， 将 自动 转换 为 字符 串 格式 。GET 
Object 请 求 中 将 附加 在 URL 后 。 防 止 这 种 自动 转换 ， 可 以 查看 processData 选项 。 对 
data 或 象 必 须 为 key/value 格式 ， 例 如 {fool :"barl", foo2 :"bar2"} 转 换 为 
String &foo1=barl&foo2=bar2。 如 果 是 数组 ,jQuery 将 自动 为 不 同 值 对 应 同一 个 名 称 。 
例如 {foo:["barl", "bar2"]} 转 换 为 &foo=barl&foo=bar2 
预期 服务 器 返回 的 数据 类 型 。 如 果 不 指定 , jQuery 将 自动 根据 HTTP 包 MIME 
言 息 返 回 responseXML 或 responseText， 并 作为 回调 函数 参数 传递 。 
可 用 的 类 型 如 下 。 
xml: 返回 XML 文档 ， 可 用 jQuery 处 理 。 
html: 返回 纯 文 本 HTML 信息 ; 包含 的 script 标签 会 在 插入 DOM 时 执行 。 
dataType String script: 返回 纯 文本 JavaScript 代码 。 不 会 自动 缓存 结果 。 除 非 设 置 了 cache 参数 。 
注意 在 远程 请 求 时 〈 不 在 同一 个 域 下 )， 所 有 POST 请 求 都 将 转 为 GET 请 求 。 
json: 返回 JSON 数据 。 
jsonp: JSONP 格式 。 使 用 JSONP 形式 调用 函数 时 ， 例 如 myurl?call back=?， 
jQuery 将 自动 替换 后 一 个 “?” 为 正确 的 函数 名 ， 以 执行 回调 函数 。 
text: 返回 纯 文 本 字符 串 
发 送 请 求 前 可 以 修改 XMLHttpRequest 对 象 的 函数 ,例如 添加 自 定义 HTTP 头 。 
在 beforeSend 中 如 果 返 回 false 可 以 取消 本 次 Ajax 请 求 。XMLHttpRequest 对 
象 是 惟一 的 参数 。 
es Punchon function (XMLHttpRequest) { 
this; // 调 用 本 次 Ajax 请 求 时 传递 的 options 参数 
} 
请 求 完成 后 调用 的 回调 函数 《请 求 成 功 或 失败 时 均 调 用 )。 
参数 : XMLHttpRequest 对 象 和 一 个 描述 成 功 请 求 类 型 的 字符 串 
complete Function function (XMLHttpRequest, textStatus) { 
this; /调用 本 次 Ajax 请 求 时 传递 的 options 参数 
} 
请 求 成 功 后 调用 的 回调 函数 ， 有 两 个 参数 。 
(1) 由 服务 器 返回 ， 并 根据 dataType 参数 进行 处 理 后 的 数据 。 
(2) 描述 状态 的 字符 串 。 
SUCCeSS Function function (data, textStatus) { 
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000 jQueyI0 200 


参数 名 称 i 


并 
湖 


说 明 





eITOT 














请 求 失败 时 被 调用 的 函数 。 该 函数 有 3 个 参数 ， 即 
XMLHttpRequest 对 象 、 错 误 信 息 、 捕 获 的 错误 对 象 〈 可 选 )。 
Ajax 事件 函数 如 下 。 

function (XMLHttpRequest, textStatus, errorThrown) { 

/通常 情况 下 textStatus 和 errorThown 只 有 其 中 一 个 包含 信息 
this; // 调 用 本 次 Ajax 请 求 时 传递 的 options 参数 

} 




















Function 
































global 





Boolean 




















默认 为 true。 表 示 是 否 触发 全 局 Ajax 事件 。 设 置 为 false 将 不 会 触发 全 局 Ajax 


事件 ，AjaxStart 或 AjaxStop 可 用 于 控制 各 种 Ajax 事件 


























如 果 需 要 使 用 $.ajax0 方 法 来 进行 Ajax 开发 ， 


















































r= 





方法 还 : 





























方法 构建 的 ， 





有 其 他 参数 ， 读 者 可 以 参考 附录 D 的 具体 介绍 。 












































例如 ， 可 以 使 用 


下 面 的 jQuery 代码 代替 $.getScript(O 方 法 : 














$(function(){ 
$('#send').click(function() { 
$.ajax({ 
YE Gel 
Ul es 


dataType: "script" 


















































那么 上 面 这 些 常 用 的 参数 都 必须 了 解 。 此 外 ，$.ajaxO 


前 面 用 到 的 $.lJ0adO 〇 、$.get()、$.post()、$.getScript() 和 $.getJSONO 这 些 方 法 ， 都 是 基于 $.ajax0 


$.ajax() 方 法 是 jQuery 最 底层 的 Ajax 实现 ， 因 此 可 以 用 它 来 代替 前 面 的 所 有 方法 。 


] 
}3 
}) 
再 例如 ， 可 以 使 用 以 下 jQuery 代码 来 代替 $.geUSON(U 方 法 : 
$(function(){ 
$('#send').click(function() { 
$.ajax({ 
Eyper Gel 
We es on 
dataType: "json", 
success : function(data){ 


$('#resText').empty(): 





var html = 
$.each( data , function(commentIindex, comment) { 
html += '<div class="comment"><h6>" 
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+ Comment[ 'username'] + ':</h6><p class= "para">" 
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+ Comment['content'] + '</p></div>"'; 
} 
$('#resText').html (html):; 












































































































































| jQuery 0 Ajax[0 0 0 























} 
}0) 
天 
10 serialize() 癌 
做 项 目的 过 程 中 ,表单 是 必 不 可 少 的 ， 经 常用 来 提供 数据 ， 例 如 注册 、 登 录 等 。 常 规 的 方法 是 
使 表单 提交 到 男 一 个 页 面 ， 整 个 浏览 器 都 会 被 刷新 ， 而 使 用 Ajax 技术 则 能 够 异步 地 提交 表单 ， 并 
将 服务 器 返回 的 数据 显示 在 当前 页 面 中 。 
前 面 在 讲解 $.get0 和 $.postO 方 法 的 时 候 ， 表 单 的 HMTL 代码 如 下 : 
<form id="forml" action="#"> 
所 嘱 上 0| 咱 | < 
<p>0 0 : <input type="text" name="Uusername” id="Username" /></p> 
<p>0 0 : <textarea name="content" id="content” rows="2" cols="20"> </textarea></p> 
<p><input type="button” id="send" value="D 0 "/></p> 
</form> 
为 了 获取 姓名 和 内 容 ， 必 须 将 字段 的 值 逐 个 添加 到 data 参数 中 。 代 码 如 下 : 





$("#send").click(function(){ 
$.get("getl.php", { 
Username : $("#username").val() ， 
$("#content").val() 
}, function (data, textStatus){ 
$("#resText").html (data); 
Ds 
be 
= 


这 种 方式 在 只 有 少量 


content : 


加 加 


























内 字段 的 表单 中 ,勉强 还 可 以 使 用 , 但 如 果 表 # 
方式 在 增 大 工作 量 的 同时 也 使 表单 缺乏 弹性 。jQuery 为 这 一 常用 的 操 
serialize()。 与 jQuery 中 其 他 方法 一 样 ，serialize() 方 法 也 是 作用 于 一 
元 素 内 容 序列 化 为 字符 串 ， 用 于 Ajax 请 求 。 通 过 使 用 serlialize() 方 法 ， 可 以 
改 为 如 下 : 


























































































































1 元 素 越 来 越 复杂 ,使 
作 提 供 了 
个 jQuery 对 象 ， 它 能 够 将 DOM 
把 刚才 的 jQuery 代码 

















] 这 种 
一 个 简化 的 方法 一 一 
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$("#send").click(function(){ 
$.get("getl.php", $("#forml").serialize() , function (data, textStatus){ 
$("#resText").html(data): VA 
je 
1 


当 单 击 “ 提 交 ” 按 钮 后 ， 也 能 达到 同样 的 效果 。 如 图 6-11 所 示 。 




















D6-11 O00 serialize()0 0 
即使 在 表单 中 再 增加 字段 ， 脚 本 仍然 能 够 使 用 ， 并 且 不 需要 做 其 他 多 余 工 作 。 







































































需要 注意 的 是 ，$.get(0 方 法 中 data 参数 不 仅 可 以 使 用 映射 方式 ， 如 以 下 jQuery 代码 : 


username : $("#username").val()., 
content : $("#content").val() 
| 


也 可 以 使 用 字符 串 方 式 ， 如 以 下 jQuery 代码 : 


"username="+encodeURIComponent ($('#username' ) .val()) 
+"&content="+encodeURIComponent ($('#content').val() ) 








用 字符 串 方 式 时 ， 需 要 注意 对 字符 编码 (中 文 问题 )， 如 果 不 希 望 编码 带 来 麻烦 ， 可 以 使 用 
serialize() 方 法 ， 它 会 自动 编码 。 













































































天 为 serialize0 方 法 作用 于 jQuery 对 象 ， 所 以 不 光 只 有 表单 能 使 用 它 ， 其 他 选择 器 选取 的 元 素 
也 都 能 使 用 它 ， 如 以 下 jQuery 代码: 

















$(":checkbox, :radio").serialize(): 


把 复 选 框 和 单 选 框 的 值 序列 化 为 字符 串 形 式 ， 只 会 将 选中 的 值 序列 化 。 
































20 serializeArray()0 口 











在 jQuery 中 还 有 一 个 与 serialize() 类 似 的 方法 








serializeArray()， 该 方法 不 是 返回 字符 串 ， 而 















































































































































D060 jQueryD Ajax0 0 0 
是 将 DOM 元 素 序列 化 后 ， 返 回 JSON 格式 的 数据 。jQuery 代码 如 下 : 
var fields = $(":checkbox, :radio").serializeArray():; 
console.log(fields); //D Firebug[0D 0 
通过 console.log0 方 法 输出 fields 对 象 ， 然 后 在 Firebug 中 查看 该 对 象 ， 如 图 6-12 所 示 。 
《2 三 加: 控 … HTD C55 胸 二 | DoE | 网络“ 
window > [5] 
四 0 Object { name="check”, value="1” } 
田 1 Object { name-"check”, value-"2”} 
由 2 Object { mame= "check"。 value="3"” } 
田 3 Object { name="check"， value="4” 
四 4 Object { name="radio"。 value=-"1” } 
0 6-12 0 Firebug0000 
既然 是 一 个 对 象 ， 那 么 就 可 以 使 用 $.each0 函 数 对 数据 进行 迭代 输出 。 代 码 如 下 : 
$(function(){ 
var fields = $(":checkbox, :radio").serializeArray(); 
console.log(fields):; // 上 [| Firebug 品 串 
$.each( fields, function( i , field ){ 
$("#results").append(field.value + " ,，"); 
J 
]) 
30 $.param()0 口 
它 是 serialize0) 方 法 的 核心 ， 用 来 对 一 个 数组 或 对 象 按照 key/value 进行 序列 化 。 
比如 将 一 个 普通 的 对 象 序 列 化 : 
Varol 订 区 DC 
var k = $.param(obj): 
alert(k); // [0D a=l1&b=2&c=3 
jQuery 简化 Ajax 操作 不 仅 体现 在 调用 Ajax 方法 和 处 理 响 应 方面 ， 而 且 还 体现 在 对 调用 Ajax 
方法 的 过 程 中 的 HTTP 请 求 的 控制 。 通 过 jQuery 提供 的 一 些 自 定 义 全 局 函数 ， 能 够 为 各 种 与 Ajax 




















相关 的 事件 注册 回调 函数 。 例 如 当 Ajax 请 求 开 始 时 ， 会 触 
请 求 结 束 时 ， 会 触发 ajaxStop0 方 法 的 回调 函数 。 这 些 方法 
代码 位 于 何 处 ， 只 要 有 Ajax 请 求 发 生 时 ， 就 会 触 
站 的 图 片 速度 可 能 会 比较 慢 ， 如 果 在 加 载 的 过 程 中 ， 
用 户 误 认为 按钮 单 击 无 用 ， 使 0 
































给 用 















































都 是 全 
在 前 面 


发 ajaxStart() 方 

















例子 中 ， 











局 的 方法 ， 





口 








法 的 回调 函数 ， 当 Ajax 
因此 无 论 创建 它们 的 
远程 读 取 Flickrcom 网 




















户 提供 一 些 提 示 


< 和 反 馈 信 息 》 很 容易 让 
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此 时 ， 就 需要 为 网 页 添加 一 个 提示 信息 ， 常 用 的 提示 信息 是 “加 载 中 ...” 代码 如 下 : 


<div id="loading">0 0 0 .</div> 



































然后 用 CSS 控制 元 素 隐藏 ， 当 Ajax 请 求 开始 的 时 候 ， 将 此 元 素 显 示 ， 用 来 提示 用 户 Ajax 请 
求 正在 进行 。 当 Ajax 请 求 结束 后 ， 将 此 元 素 隐 藏 。 代 码 如 下 : 























$("#loading").ajaxStart(function(){ 
$(this).show(); 

js 

$("#loading").ajaxSstop(function(){ 
$(this).hide(); 

网 时 /加 加 加 加 三 融 呈 下 加 














这 样 一 来 ， 在 Ajax 请 求 过程 中 ， 只 要 图 片 还 未 加 载 完 毕 ， 就 会 一 直 显 示 “ 加 载 中 …” 的 提示 
言 息 ， 看 似 很 简单 的 一 个 改进 ， 却 将 极 大 地 改善 用 户 的 体验 。 效 果 如 图 6-13 所 示 。 










































































如 果 在 此 页 面 中 的 其 他 地 方 也 使 用 Ajax， 该 提示 信息 仍然 有 效 ， 因 为 它 是 全 局 的 。 如 图 6-14 
所 示 。 
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jQuery 的 Ajax 全 局 事件 中 还 有 几 个 方法 ， 也 可 以 在 使 用 Ajax 方法 的 过 程 中 为 其 带 来 方便 。 如 
表 6-4 所 示 。 





























表 6-4 另外 几 个 方法 
方法 名 称 说 ”有明 
ajaxComplete(callback) Ajax 请 求 完成 时 执行 的 函数 
ajaxError(callback) Ajax 请 求 发 生 错误 时 执行 的 函数 ， 捕 捉 到 的 错误 可 以 作为 最 后 一 个 参数 传递 
ajaxSend(callback) Ajax 请 求 发 送 前 执行 的 函数 
ajaxSuccess(callback) Ajax 请 求 成 功 时 执行 的 函数 
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:土生 
壮 忌 : 


1， 如 果 想 使 某 个 Ajax 请 求 不 受 全 局 方法 的 影响 ， 那 么 可 以 在 使 用 $.ajax(options) 方 法 时 ， 将 
参数 中 的 global 设置 为 false，jQuery 代码 如 下 : 


$.ajax({ 
Ue esanbmle 
global : false a 


DE 
2， 在 jQuery1.5 版 本 之 后 ， 如 果 Ajax 请 求 不 触发 全 局 方法 ， 那 么 可 以 设置 : 
$.ajaxPrefilter(function( options ) { a oa oi a 

options.global = true; 


je 
有 具体 原因 请 查看 : http://bugs.jquery.com/ticket/8338 





P00 wa0 W00000 
































通过 前 面 的 介绍 ， 相 信 读 者 已 经 对 jQuery 的 Ajax 有 了 较 深 的 认识 。 下 面 ， 将 讲解 一 个 较为 复 
杂 的 Ajax 实例 ， 可 以 帮助 读者 更 好 地 掌握 Ajax 的 精髓 











一 个 基于 Ajax 无 需 刷 新 技术 开发 的 聊 





















































室 程 序 ， 该 程序 允许 多 用 户 在 网 页 上 聊天 ， 并 且 可 以 实时 地 更 新 信息 。 


6.8.1 DO0DO0D0 

















先 设计 聊天 室 的 外 观 ， 如 图 6-15 所 示 。 





张 三 : 88888 
张 三 : ?77777 
李 四 : 6666666 
李 四 : 55555 


张 三 : 11111 











姓名 :” 张 三 
内 容 : 














0615 00000 


6.8.2 D0000 
这 里 使 用 MySql 数据 库 来 存储 信息 。 
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先 构建 一 个 














和 卯 天 信息 表 messages, 它 有 4 个 字段 , 即 消 息 编 号 (id)、 姓 名 Cuser)、 内容 (msg) 


以 及 一 个 数字 时 间 惟 (time)。 下 面 是 创建 该 表 的 SQL 代码 : 


CREATE TABLE 


essages' ( 





“id int(7) NOT NULL auto increment ， 
'user' varchar(255) NOT NULL ， 

'msg' text NOT NULL ， 

EN 人 于 NU 四 本 

PRIMARY KEY (id ) 





6.83 00D00000 


























服务 器 端 主要 用 来 处 理 用 户 提交 的 信息 以 及 输出 返 





@。 首先 需 











要 在 服务 器 端 链接 数据 库 。 





回 。 


图 ”其 次 如 果 有 用 户 提交 新 信息 ， 则 把 信息 插入 数据 库 ， 同 时 删除 旧 的 数据 信息 (保持 数据 
库 中 只 有 10 条 信息 )。 
日 ”最 后 从 数据 库 中 获取 新 的 信息 并 以 XML 格式 输出 返回 。 


这 里 可 以 先 模拟 服务 端 输 出 的 XML 代码 结构 ，XML 文档 代码 如 下 : 





<?xml version="1.0" encoding="UTF-8"?> 


<response> 


<status>1</status> 
<time>1170323512</time> 


<message> 


<author>0 0 </author> 
<text>0 0 !</text> 


</message> 





<message> 


<author>0 0 </author> 
<text>0 0 !</text> 


</message> 


</response> 


在 这 个 XML 结构 









































标签 和 一 个 “time” 标 签 。 其 中 “status” 标 签 用 来 表示 信 











息 请 求 成 功 ， 如 
可 以 被 用 来 读 取 














果 值 为 2， 则 表示 请 求 成 功 但 没有 六 
该 时 间 惟 后 用 户 提交 的 新 数据 。 





信和， 


自 





Co 








PF， 不 光 只 有 消息 的 实体 (包括 作者 及 其 聊天 信息 )， 还 增加 了 一 个 “status” 





县 请 求 的 状态 ， 如 果 值 为 1， 则 表示 新 信 











“time” 标 签 用 来 记录 信息 请 求 的 时 间 ， 
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在 客户 端 需要 做 两 项 工作 。 

日 ”首先 提交 用 户 聊天 信息 ， 然 后 处 理 服 务 器 端 返回 的 聊天 信息 ， 将 信息 实时 呈现 出 来 。 

加 ”每 隔 一 定时 间 发 起 查询 数据 库 中 聊天 记录 的 请 求 ， 然 后 处 理 服务 端 返 回 的 聊天 信息 ， 将 
信息 实时 呈现 出 来 。 

(1) 提交 用 户 聊 天 信息 
使 用 POST 方式 向 服务 器 发 送 请 求 ， 将 用 户 填写 的 姓名 和 内 容 等 数据 传递 到 服务 器 端 ， 在 服务 
器 端 处 理 后 返回 相应 的 XML 数据 ， 然 后 使 用 回调 函数 处 理 服务 器 端 返回 的 这 些 数据 ， 并 将 新 信息 
追加 到 客户 端的 消息 显示 区 中 。 


(2) 浏览 器 每 隅 一 定时 间 更 新 数据 





















































































































































调 函 数 处 理 服务 器 端 返回 的 XML 


荆 











增加 一 个 定时 器 ， 并 且 每 隔 一 定时 间 调 用 一 次 。 然 后 使 用 
数据 ， 并 将 新 信息 追加 到 客户 端的 消息 显示 区 中 。 
由 于 上 面 的 两 项 工作 都 需要 对 XML 文档 进行 解析 ， 然 后 追加 到 信息 显示 区 ， 因 此 可 以 将 此 操 
作 进 行 封装 ， 以 便于 重复 利用 。 在 设计 该 XML 文档 操作 函数 时 ， 应 注意 通过 状态 〈“status” 标 签 ) 
和 时 间 戳 “〈“time” 标 签 ) 来 控制 获取 聊天 信息 。 
















































































| 











6.8.5 0U000D0 


10000 HTMLODO 


先 建立 一 个 HTML 页 面 。 从 前 面 的 外 观 设计 可 以 知道 页 面 需 要 一 个 外 围 <div>、 一 个 消息 段 
落 (用 来 显示 聊天 信息 )、 姓 名 文本 框 、 消 息 文本 、 提 交 按 钮 的 表单 和 一 个 加 载 信息 时 的 提示 。HTML 


代码 如 下 : 






















































































<div id="wrapper "> 
<p id="messagewindow"><span id="1loading">0 0 0 .</span></p> 
<form rid chatiorm > 
DOO00<input type="text” id="author" size="50"/><br /> 
DOO00<input type="text" id="msg"” size="50"/><br /> 
<input type="submit" value="0 0 " /><br /> 
</form> 


</div> 


当 用 户 第 1 次 进入 聊天 室 的 时 候 ， 显 示 效 果 如 图 6-16 所 示 。 
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姓名 : 


内 容 : 











06160000000 
20000 jQuery0 0 















































首先 ， 需 要 设置 当前 消息 的 时 间 惟 为 0， 并 且 调 用 函数 来 加 载 数据 库 已 有 的 聊天 消息 ， 代 码 
如 下 : 

timestamp = 0; yo 

updateMsg( ): 误 加 轩 辐 加 加 轩 和 加 加 加 加 轩 加 避 加 则 加 


然后 ， 为 表单 添加 一 个 submit 事件 ， 代 码 如 下 : 


$("#chatform").submit(function(){ 
Wo 
ee 


在 submit 事件 函数 中 ， 可 以 使 用 jQuery 的 $.post0 方 法 来 发 送 一 个 POST 请 求 ， 把 要 传递 的 数 
据 都 放 入 第 2 个 参数 中 ， 用 { } 包 里 ， 代 人 码 如 下 : 












































$.post("backend.php",{ 
message: $("#msg").val(), 
name: $("#author").val(), 
acbion postmsg 
time: timestamp 

}, function(xml) { 
VA xm 

es 


接 下 来 ， 如 何 响应 返回 的 XML 呢 ? 为 了 使 代码 能 被 重用 ， 这 里 创建 一 个 处 理 XML 的 函数 并 
调用 该 函数 〔 在 updateMsg() 方 法 中 ， 也 要 用 到 这 个 解析 XML 的 函数 )。 函 数 如 下 : 































































































addMessages(xml ) : Wn 


addMessagesO 函 数 里 的 具体 内 容 将 在 后 边 实现 。 
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现在 就 可 以 列 出 表单 提交 的 全 部 代码 了 ， 代 码 如 下 : 














$("#chatform").submit(function( ){ 
$.post("backend.php",{ 
message: $("#msg").val(), 
name: $("#author").val(), 
aetlon postnsg 
time: timestamp 
}, function(xm1) { 





Hm al CA 
addMessages(xml] ) CO 
人 
return false; CA 


) 这 












































在 表单 提交 事件 的 最 后 一 行 添加 了 “return false;” 语 句 ， 可 以 用 来 阻止 浏览 器 提交 表单 。 


现在 再 看 addMessages0 函 数 , 它 是 用 来 处 理 XML 响应 信息 的 。 前 面 讲解 过 , jQuery 遍历 XML 
































文档 与 遍历 DOM 一 样 。 使 用 So 其 代码 如 下 : 








function addMessages(xml) { 








(CO Sats 2 (= 2 nen VA La 


Wa 
} 














上 段 代码 中 使 用 ta xml) 方 法 来 通知 jQuery 去 XML 文档 中 寻找 “status ”标签 。 如 果 状 
































态 代 码 为 2， 则 表示 完成 了 请 求 但 没有 新 信息 需要 添加 到 该 客户 端的 消息 显示 区 中 ， 因 此 使 用 
































“return;” 语 名 终止 函数 调用 。 如 果 状 态 代码 不 为 2， 则 继续 往 下 执行 。 























接 下 来 需要 为 XML 的 时 间 戳 设 定 新 的 值 ， 用 来 传递 给 后 台 去 查询 新 的 数据 。 获 











码 如 下 : 


timestamp = $("time",xml).text():; 



































获取 时 间 戳 的 代 
























































然后 使 用 $.each0) 函 数 将 XML 文档 里 的 数据 遍历 出 来 。 在 示例 中 ,需要 显示 到 客户 端 消 息 显 示 

















区 的 元 素 就 是 服务 器 端 返回 的 每 一 个 “message” 标 签 的 实例 ， 每 个 实例 代表 一 
以 下 代码 展示 如 何 遍历 数据 ; 


























$("message" ,xml).each(function() { 
Var author = $("author",this).text(): ya 
var content = $("text",this).text(); Wo 
var htmlcode = "<strong>"+author+"</strong>: "+content+"<br />": 
DE 
| 






































导 到 了 所 需 的 数据 之 后 ， 就 可 以 将 其 妃 加 到 消息 显示 区 里 。 消 息 


条 要 显示 的 消息 。 











示 窗 体 的 id 为 


199 






































“messagewindow” 因此 可 以 使 用 $("#messagewindow") 来 选择 到 它 并 且 使 用 prepend0 方 法 来 追加 数 
据 ， 代 码 如 下 : 

















$("#messagewindow").prepend( htmlcode ) 


将 它们 整合 后 ，addMessages(xml) 函 数 的 代码 如 下 : 





function addMessages(xml) { 


加 
if($("status" ,xml).text() == "2") return 











timestamp = $("time",xml).text(); Wa I 

$("message" ,xml).each(function() { WA an 
var author = $("author",this).text(); wa lgl i 
var content = $("text",this).text(); yagi 
var htmlcode = "<strong>"+author+"</strong>: "+content+" <br />": 
$("#messagewindow").prepend( htmlcode ): #0 0 og 

DE 











最 后 ， 只 剩 下 刚 开 始 调用 的 函数 updateMsg() 还 未 完成 。 该 函数 的 功能 是 到 服务 器 查询 新 信 
息 ， 并 且 调 用 addMessages0 〇 函数 来 响应 返回 的 XML 文档 ， 同 时 需要 设置 一 个 间隔 时 间 ， 让 聊天 
窗口 自动 更 新 。 要 开始 做 这 些 工作 ， 只 需要 向 服务 器 提交 一 个 时 间 戳 ， 引 用 这 个 $.postO 调 用 即 可 ， 
代码 如 下 : 








































































































.post("backend.php",{ time: timestamp }，function(xml) { 
VA ra 
ys 


在 回调 函数 里 ， 首 先 应 该 移 除 loading 消息 ， 可 以 在 这 个 元 素 上 调用 remove0 方 法 ， 代 人 码 如 下 : 


















































$("#loading").remove(): 


然后 ， 在 回调 函数 中 将 接受 到 的 XML 文档 对 象 传递 给 addMessages0 〇 函数 ， 代 码 如 下 : 





addMessages (xml); 

















最 后 调用 JavaScript 的 setTimeout(O) 方 法 来 每 隔 一 定时 间 执 行 updateMsgO 函 数 。 


updateMsg0 函 数 的 代码 如 下 : 











function updateMsg(){ 
$.post("backend.php",{ time: timestamp }, function(xml) { 


oa 
$("#1lo0ading").remove(): 


/0000 xm000 


200 


0 60 jQuery0 Ajax00 


addMessages (xm|); 
国史 
VAN 
setTimeout('updateMsg()', 4000):; 


} 
6.8.6 0000 
<1-- 00 jQuery --> 


<script src="../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 


$(function(){ 
timestamp = 0; wy 
updateMsg() ; 已 加 区 下 于 加 加 加 加 
$("#chatform").submit(function(){ #0 og 


$.post("backend.php",{ 
message: $("#msg").val(), 
name: $("#author").val(), 
action: "postmsg", 
time: timestamp 
} Maier my 











$("#msg").val(""); 到 加 加 加 加 0 
addMessages (xml); 加 加 加 加 加 加 
| 
return false; waa le a a ol a 


} ys 
J 
太 加 加 轩 和 加 加 加 加 加 加 加 加 加 
function updateMsg(){ 


$.post("backend.php",{ time: timestamp }, function(xml) { 
$("#1l0ading").remove(): Wavemiatey 人 
addMessages (xml ) ; 罗 加 加 加 加 加 加 加 

) 

setTimeout('updateMsg()', 4000): // 昌 日 4 口 口 虽 吕 0 曲 

















} 
A Xa a a Wala 
function addMessages(xml) { 


if($( "status", xml).text() == "2") retunn; #0 a a 2 laa 
timestamp = $("time",xml).text(); //0 0000 
$("message" ,xml).each(function() { w/aehie 加 和 加 有 加 必 四 和 加 加 
var author = $("author",this).text(): WA 
var content = $("text",this).text(): ya 
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var htmlcode = "<strong>"+author+"</strong>: "+COntent+”<br />"; 
$("#messagewindow").prepend( htmlcode ); //000000 
Ee 
} 
</script> 
<div id="wrapper"> 
<p id="messagewindow"><span id="1loading">0 0 0 .</span></p> 
<form id="chatform"> 
O00 : <input type="text” id="author” size="50"/><br /> 
00: <input type="text" id="msg" size="50"/> <br /> 
<input type="submit" value="0 0 " /><br /> 
</form> 
</div> 


聊天 界面 如 图 6-17 所 示 。 


正如 读者 所 看 到 的 , 仅 用 了 少量 的 jQuery 代码 , 就 实现 了 一 个 完整 的 基于 Ajax 的 Web 聊天 室 
应 用 程序 。 用 jQuery 可 以 如 此 简单 的 实现 一 个 复杂 的 Ajax 应 用 ， 不 得 不 令 人 叹服 。 


ee] | [9 |] [hetp://1ocahort/6/dono9-ehat/ demol. htnl 
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区 0 


本 章 首 先 对 Ajax 进行 了 简介 ， 并 且 介 绍 了 Ajax 的 优势 与 不 足 ， 让 读者 充分 了 解 到 Ajax 的 适 
用 范围 。 接 下 来 介绍 了 Ajax 的 XMLHttpRequest 对 象 ， 并 展示 了 传统 的 Ajax 程序 的 编写 ， 然 后 系 
统 地 讲解 了 jQuery 中 的 Ajax 方法 。 在 介绍 了 序列 化 元 素 和 Ajax 全 局 事件 两 个 重要 的 概念 后 ， 讲 
解 了 一 个 稍微 复杂 的 Ajax 聊天 室 程序 。 
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插件 (Plugin) 也 称 为 扩展 〈Extension) ， 是 一 种 遵循 一 定 规范 的 应 用 程序 接口 编写 出 来 的 程序 。 


jQuery 的 易 扩展 性 ， 吸 引 了 来 自 全 球 的 开发 者 来 共同 编写 jQuery 的 插件 。 目 前 ， 己 经 有 超过 
儿 千 种 的 插件 应 用 在 全 球 不 同类 型 的 项 目 上 。 使 用 这 些 经 过 无 数 人 检验 和 完善 的 优秀 插件 ， 可 以 帮 
助 用 户 开 发 出 稳定 的 应 用 系统 ， 节 约 项 目 成 本 。 

最 新 最 全 的 插件 可 以 从 jQuery 官方 网 站 的 插件 板块 中 获取 ， 网 站 地 址 为 : http://plugins. 
jquery.com/。 如 图 7-1 所 示 , 不 仅 可 以 在 右上 方 或 左 中 方 的 Search 区 域 搜索 jQuery 插件 ， 也 可 以 在 
右 中 方 的 Categories 区 域 ， 通 过 选择 不 同 的 类 型 来 查找 插件 。 


















































































































































































































































071 00000000 
下 面 介绍 几 个 常用 的 jQuery 插件 ， 并 对 如 何 编写 jQuery 插件 进行 全 面 地 讲解 。 





























注意 : 因 垃 圾 邮件 、 不 规范 的 插件 、 数 据 备份 、 版 本 维护 以 及 对 目前 插件 站 点 功能 的 不 满足 等 多 种 因 
素 , jQuery 官方 已 经 将 项 目 托 管 于 GitHub。 地 址 为 : https://github.com/jquery/plugins.jquery.com.。 
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7.1.1 Validation 吕 口 





























最 常 使 用 JavaScript 的 场合 就 是 表单 的 验证 ， 而 jQuery 作为 一 个 优秀 的 JavaScript 库 ， 也 提供 











0U00Ujouery00 200 














了 一 个 优秀 的 表单 验 说 


FE 插件 














Validation。 Validation 是 历史 最 悠久 的 jQuery 插件 之 一 ， 经 过 了 











全 球 范 围 内 不 同 项 




















的 验证 ， 并 得 到 了 许多 Web 开发 者 的 好 评 。 作 为 一 个 标准 的 验证 方法 库 ， 











Validation 拥有 如 下 特点 。 


© 
© 
2 
© 


内 置 验证 规则 : 拥有 必 填 、 数 字 、E-Mail、URL 和 信用 卡号 码 等 19 类 内 置 验证 规则 。 
自 定 义 验 证 规则 : 可 以 很 方便 地 自 定义 验证 规则 。 

简单 强大 的 验证 信息 提示 : 默认 了 验证 信息 提示 ， 并 提供 自 定义 履 盖 默认 提示 信息 的 功能 。 
实时 验证 : 可 以 通过 keyup 或 blur 事件 触发 验证 ， 而 不 仅仅 在 表单 提交 的 时 候 验 证 。 





rr 











J6rn Zaefferer 设计 了 Validation 插件 ， 并 从 2006 年 7 月 开始 一 直 在 对 该 插件 进行 改善 和 维护 。 


7.1.2 


jQuery Validation 捐 


UUUD0 


























i 件 的 下 载 地 址 : 


http:/bassistance.de/jquery-plugins/jquery-plugin-validation/ 


在 











图 7-2 所 示 的 界 




















看 中 ， 不 仅 可 以 下 载 该 插件 ， 也 可 以 查看 所 有 历史 版 本 的 更 新 说 明 。 在 该 页 








面 还 可 以 查看 英文 文档 和 演示 例子 等 。 


了 
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jQuery plugin: Validation 


ThisjQuery plugin makes simple clientsideform validation trivial, while offeringlots of 
option for customization. That makes a good choiceifyourebuilding something new 
from scratch, but also when youretryingtointegrateitinto an existing application 
with lots of existing markup. The plugin comes bundled with a useful set of validation 
methods, including URL and email validation, while providing an API to write your own 
methods. All bundled methods come with default error messages in english and 
translations into 36 locales. 


The plugin is written and maintained by Jérn Zaefferer, a member of the jQuery team, 
lead developer on the jQuery UI team and maintainer of QUnit. It was started back in 
the early days of jQuery in 2006, and updated and improved since then. 


Current version: 1.9.0 
Minified filesize (even less with GZip): 21,601 bytes 
License: MIT/GPL 


Files: 


Download 
Changelog 
Demos 
Documentation 


D7-2 validation0DDDOODOD 


先 看 一 个 简单 的 例子 7-1-1，HTML 和 jQuery 代码 如 下 : 





<UDOCGTYRENHIMIPUBILCY S/WSCAADMDY HMO amnsi ional/AEN 
"http://www.w3.org/TR/html4/1o0se.dtd"> 
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<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="../../scripts/jquery.js"type="text/javascript"></script> 
<script src="|1ib/jquery.validate.js"type="text/javascript"></script> 
<style type="text/css"> 

* { font-family: Verdana; font-size: 96%; } 

label { width: 10em; float: left; } 


label .error { float: none; color: red; padding-left: .5em;vertical- align: top; 


poeclear oe 
.Submit { margin-left: 12em; } 
em { font-weight: bold; padding-right: lem; vertical-align: top; } 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#commentForm").validate(): 
DE 
</script> 
</head> 
<body> 
<form class="cmxform" id="commentForm" method="get" action="#"> 
<fieldset> 
<legene= gen> 


<p> 





<label for="cusername">0 0 </1abel><em>*</em> 





<input id="cusername"” name="Username" 
size="25" class="required" minlength="2" /> 
</p> 
<p> 
<label for="cemail">0D 0 0 0 </1abel><em>*</em> 
<input id="cemail"” name="email" 





size="25" class="required email” /> 
</p> 
<p> 
<label for="curl">0 0 </label><em>&nbsp;</em> 
Eu eu name vl 
Size="265" Class= Url value="™ /> 
</p> 
<p> 
<label for="ccomment">0 0 0 0 </1abel><em>*</em> 
<textarea id="ccomment" name="comment" 
cols="22" class="required"></textarea> 
ep 
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<p> 


<input class="submit" type="submit” value=" 中 中 "人 /> 


</p> 
</fieldset> 
</form> 
</body> 
</html> 


上 面 代码 完成 了 以 下 验证 。 
(1) 对 “姓名 ”的 必 填 和 长 度 至 少 是 两 位 的 验证 。 
(2) 对 “电子 邮件 ”的 必 填 和 是 否 为 E-mail 格式 的 验证 。 











(3) 对 “网 址 ”是 否 为 url 的 验证 。 








(4) 对 “你 的 评论 ”的 必 填 验证 。 





T 
































当 用 户 单 击 “ 提 交 ” 按 钮 后 ， 显 示 图 7-3 所 示 的 效果 。 

































































上 一 个 简单 的 验证 带 验证 提示 的 评论 例子 
姓名 0 This field is required. 
电子 邮件 This field is required. 
网 址 
你 的 评论 村 This field is required. 
073 000000 
当 用 户 在 “姓名 ”对 应 的 文本 框 中 输入 字符 时 ， 表 单元 素 也 会 实时 响应 验证 ， 产 生 图 7-4 所 示 














的 效果 。 














姓名 和 民 Please enter at least 2 characters. 








074 000000 











当 用 户 输入 字符 时 ， 表 单元 素 就 会 实时 响应 验证 信息 ， 而 不 是 只 在 用 户 单 击 “ 提 交 ” 按 钮 后 才 
出 现 。 这 样 做 的 好 处 是 极 大 地 方便 了 用 户 ， 促 使 用 户 填写 出 符合 格式 的 数据 。 



































从 例子 中 可 以 看 到 ， 只 需 完成 以 下 儿 步 操作 ， 就 可 以 将 一 个 普通 的 表单 改造 为 可 以 进行 
Validation 验证 的 表单 。 





Ey 


(1) 引入 jQuery 库 和 Validation 插 价 
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<script src="../../scripts/jquery.js" type="text/javascript"></script> 
<script src="|1ib/jquery.validate.js" type="text/javascript"> </script> 


(2) 确定 哪个 表单 需要 被 验证 





o 


$("#commentForm").validate(): 


(3) 针对 不 同 的 字段 ， 进 行 验证 规则 编码 ， 设 置 字段 相应 的 属性 。 









































加 class='required" 为 必须 填写 ，minlength="2" 为 最 小 长 度 为 2。 
加 ”class='required email" 为 必须 填写 和 内 容 需 要 符合 E-mail 格式 。 
加 ”class='"url "为 url 格式 验证 。 


7.14 0U0000060 








[ey 





上 节 的 例子 中 ， 开 发 者 必须 把 required、url 和 email 写 到 class 属性 里 ， 才 能 完成 必 填 验证 、 
url 验证 和 E-mail 验证 ; 把 minlength 属性 的 值 设置 为 2, 才能 完成 最 小 长 度 为 2 的 验证 。 虽然 class 
和 minlength 属性 都 符合 W3C 规范 ， 但 对 于 开发 者 来 说 ， 时 而 将 与 验证 相关 的 信息 写 在 class 属性 
里 面 ， 时 而 又 写 在 minlength 属性 里 面 实在 很 抹 烦 。Validation 充分 考虑 到 了 这 一 点 , 读者 可 以 将 所 有 
的 与 验证 相关 的 信息 写 到 class 属性 中 方便 管理 。 为 了 实现 这 个 功能 ， 需 要 经 过 以 下 几 个 步骤 。 

































































































































































(1) 引入 一 个 新 的 jQuery 插件 一 一 jquery.metadata.js。 





<script Src="1ib/jquery .metadata.js” type="text/javascript"></script> 





注意 : jquery.metadata.js 是 一 个 支持 固定 格式 解析 的 jQuery 插件 ，Validation 插件 将 其 很 好 地 融合 
到 验证 规则 编码 中 。 通 过 下 面 的 例子 7-1-2， 读 者 可 以 很 容易 地 了 解 到 需要 掌握 的 格式 ， 更 
加 详细 的 metadata 插件 参见 网 址 http://plugins.jquery.com/project/metadata。 








(2) 改变 调用 的 验证 方法 。 


$("#commentForm").validate(): 
改 为 
$("#commentForm").validate({meta: "validate"}):; 


(3) 将 验证 规则 全 部 编写 到 class 属性 中 ， 例 7-1-2 的 HTML 代码 如 下 : 























Ws 加 加 加 加 
<p> 


<label for="cusername">0 0 </label><em>*</em> 
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<input id="cusername”name="username”Size="25” 
class="{validate: {required:true, minlength:2}}" /> 
</p> 
<p> 
<label for="cemail">0 0 0 0 </1abel><em>*</em> 
<input id="cemail” name="email" 
size="25" class="{validate:{required:true,email: true}}” /> 
</p> 
<p> 
<label for="curl">0 0 </1abel><em>&nbsp:;</em> 
<input id="curl" name="url" size="25" class="{validate:{url:true}}"/> 
</p> 
<p> 
<label for="ccomment">0 D0 0 0 </1abel><em>*</em> 
<textarea id="ccomment" name="comment" cols="22" 
class="{validate:{required:true}}"></textarea> 
</p> 
A 


此 时 ， 本 段 代码 的 验证 效果 与 前 面 的 例子 完全 一 致 。 
在 上 面 两 个 例子 中 ， 验 证 规则 都 是 通过 设置 一 定 的 属性 值 来 实现 的 ， 但 验证 行为 和 HTML 


结构 并 没有 完全 脱 钧 。 下 面 介绍 一 种 与 HTML 元 素 属 性 无 直接 关联 , 而 是 通过 name 属性 来 关联 字 
段 和 验证 规则 的 验证 写法 ， 这 种 方法 可 以 实现 行为 与 结构 的 分 离 。 


先 , 将 字段 中 的 class 属性 移 除 , 此 时 的 HTML 代码 并 无 其 他 多 余 的 属性 , 例 7-1-3 的 HTML 
代码 如 下 : 






































i 

































































| 























A 


form class="cmxform" id="commentForm" method="get" action=""> 
seldsec 
legend>@o on /egene> 
<p> 
<label for="cusername">0 0 </label><em>*</em> 
<input id="cusername" name="username" Size="25" /> 


<label for="cemail">0 0 0 0 </1abel><em>*</em> 
<input id="cemail" name="email” size="25” /> 


<label for="curl">0 0 </1label><em>&nbsp:;</em> 
<input id="curl” name="url" size="25"” value="" /> 
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<label for="ccomment">0 0 0 0 </1abel><em>*</em> 
<textarea id="ccomment" name="comment" cols="22"> 
</textarea> 

< 


<input class="submit" type="submit" value="0 0 "/> 
</D> 
</fieldset> 

</form> 


然后 加 入 如 下 jQuery 代码 : 





$(document).ready(function(){ 
$("#commentForm").validate({ 





rules: { 

username: { 
required: true, 
minlength: 2 

bp 

email: { 
required: true, 
email: true 

by 

We el 


comment: "required" 


DE 
运行 代码 后 ， 验 证 效果 与 前 面 的 例子 也 是 完全 一 致 的 。 本 例 中 ， 有 具体 编码 步骤 如 下 。 


(1) 在 $("#commentForm").validate0O) 方 法 中 增加 rules 属性 。 










































































(2) 通过 每 个 字段 的 name 属性 值 来 匹配 验证 规则 。 

(3) 定义 验证 规则 : 例如 required: true，email: true，minlength: 2 等 。 
7.1.5 DO0ODOOD 

各 ”国际 化 









































Validation 插件 的 验证 信息 默认 语言 为 英文 ,如果 要 改 成 中 文 , 只 需要 引入 Validation 提供 的 中 
文 验证 信息 库 即 可 ， 引 入 代码 如 下 : 
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<script src="|ib/jquery.validate.messages cn.js"type="text/javascript"> 








引入 语言 库 后 ， 显 示 图 7-5 所 示 的 验证 效果 。 



























































广 一 个 简单 的 验证 带 验证 提示 的 评论 例子 
姓名 了 必 选 字段 
电子 邮件 本 必 选 字段 
网 址 
你 的 评论 *[ | 必 选 字段 
j 
07-5 000000 
Validation 插件 也 支持 其 他 常用 语言 ， 读 者 可 以 自行 引入 相应 的 语言 库 进行 配置 。 





日 ” 自 定义 验证 信息 








Validation 插件 可 以 很 方便 地 自 定义 验证 规则 , 用 来 代替 干 
































例 7-1-2 中 的 字段 提示 信息 的 class 值 改 成 如 下 代码 : 











你 


a 


<form class="cmxform" id="commentForm" method="get" action="#"> 


<fieldset> 
egend a Aegend 
<p> 


<label for="cusername">0 0 </label><em>*</em> 


<input id="cusername" name="Uusername"” size="25 


essages:{required:'0DDOODD ，， 
nlengen 加 加 加 加 加 | 咒 轴 | 加 而 吓人 
</p> 
<p> 
<label for="cemail">0 0 0 0 </label><em>*</em> 
<input id="cemail" name="email" size="25" 





essages:{required:'0DODOOO0000', 
ni 可 
</p> 
<p> 
<label for="curl">0 0 </1abel><em>&nbsp:;</em> 
<input id="curl” name="url” size="25" 
class="{validate: {url:true, 
messagese uo 
</p> 


class="{validate: {required:true, minlength:2, 


class="{validate: {required:true, email:true, 








的 默认 验 训 





FE 信息 





日 心 \ 


， 例 如 将 


<p> 
<label for="ccomment">0 D0 0 0 </1abel><em>*</em> 
<textarea id="ccomment" name="comment" cols="22" 
class="{validate: {required:true, 
messages:{required: D000000'})}}" > 
</textarea> 
</p> 
<p> 
<input class="submit" type="submit" value="0 0 "/> 
</p> 
</fieldset> 
</form> 


运行 代码 后 ， 显 示 图 7-6 所 示 的 效果 。 
































一 个 简单 的 验证 带 验证 提示 的 评论 例子 

姓名 过 ”|] 请 给 入 姓名 
电子 邮件 一 | 请 输入 电子 邮件 
网 址 

你 的 评论 一 请 输入 您 的 评论 





0760000000 


加 自 定 义 验 证 信息 并 美化 








也 许 读者 需要 为 验证 提示 信息 加 些 漂亮 的 图 片 ， 这 对 于 Validation 插 介 





事情 。 例 如 在 例 7-1-3 中 的 jQuery 代码 中 增加 如 下 代码 : 











errorElement: "em", CA a a 
success: function(label) { VA 
Va le a em 
label .text(" ") VA 
.addClass("success"); yo sucessd 
} 


在 CSS 代码 中 增加 如 下 代码 ， 以 便 和 errorElement 相关 联 。 


emaempole 
background:url("images/unchecked.gif") no-repeat 0px Opx: 
padding-left: 16px: 

} 


em.success { 





F 来 说 ， 也 是 非 


A 


吊 | 加 


070 jauerv00000000 


单 的 


000 jQuery0D 2 吕 吕 


background:url("images/checked.gif") no-repeat 0px 0px: 
padding-left: 16px: 
} 


运行 代码 后 ， 提 示 信 息 中 就 会 包含 错误 提示 图 片 ， 如 图 7-7 所 示 效 果 。 






































姓名 |cssrain 包 
电子 邮件 * | 加 共和 下子 ip 帮 
网 址 
你 的 评论 a | 加 福田 入 歼 的 评 竣 
提交 
077 0000 


7.16 0000000 



































衡量 一 个 表单 验证 插件 是 否 优 秀 的 重要 标准 是 看 它 是 否 有 良好 的 自 定义 验证 规则 。 由 于 需求 的 
多 种 多 样 ， 除 提供 的 默认 验证 规则 外 ， 还 需要 自 定义 验证 规则 ， 满 足 业 务 需 要 。 





























在 很 多 网 站 中 ， 表 单 中 都 包括 验证 码 ， 通 过 自 定义 验证 规 





渤 


J， 可 以 轻易 地 完成 验证 码 的 验证 。 
先 在 上 面 例子 的 基础 上 ， 添 加 验证 “验证 码 ” 的 HTML 代码 ， 代 码 如 下 : 












































<p> 

<label for="cvalcode">0 D0 0 </label> 

<input id="cvalcode" name="valcode" size="25" valye="" />=/7+9 
</p> 








为 了 实现 验证 “验证 码 ” 的 功能 ， 需 要 完成 以 下 几 个 步 又。 











(1) 自 定 义 一 个 验证 规则 。 





jQuery 代码 : 


加 加 加 加 加 加 回回 加 
$.validator.addMethod( 


"formula", VAN 

function(value, element, param) { wa mo 
return value == eval(param): 

bo 

加 加 加 名 区 加 下 可 加 加 
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(2) 调用 该 验证 规则 。 











jQuery 代码 中 的 rules 中 加 入 valcode: { formula: "7+9" }， 其 中 "7+9" 这 个 字符 串 可 以 通过 其 他 手 
段 获得 ， 例 如 获取 页 面 某 个 元 素 的 text0 或 者 通过 Ajax 来 取得 。 这 里 为 了 简化 就 简单 写成 了 "7+9"， 








如 下 面 代码 的 力 























$("#commentForm"). 


DD 


rules: { 


email: 





[0 粗 部 分 所 示 : 


validate({ 


username: {required: true, minlength: 2}, 


{required: true, email: true}, 


Ul 


comment: "required", 
valcode: {formula: "7+9"} 





运行 代码 后 ， 该 页 面 的 验证 显示 如 图 7-8 所 示 。 
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Validation 扣 





























验证 码 Be 态 正 区 租 入 效 完 人 过 1 营 后 的 续 丑 -7+9 











加 





API 





078 00000 


E 件 的 官方 API 地 址 为 : 


http://docs.jquery.com/Plugins/Validation 。 


关 





于 Validation 扣 





i 件 的 API 内 容 ， 读 者 可 以 参考 附录 下。 


Bo eg 0 0 0 0 一 Am 


7.2.1 FormnOOoOnDb 


jQuery Form 插件 是 一 个 优秀 的 Ajax 表单 插件 ， 可 以 非常 容易 地 、 无 侵入 地 升级 HTML 表 生 
以 文 持 Ajax。jQuery Form 有 两 个 核心 方法 











sy 





























ajaxForm() 和 ajaxSubmit()， 它 们 集合 了 从 控制 表单 











元 素 到 决定 如 何 管理 提交 进程 的 功能 。 另 外 ， 插 件 还 包括 其 他 的 一 些 方法 : formToArray()、 


formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 和 resetForm() 等 。 














Mike Alsup 设计 了 jQuery Form 插件 ， 并 进行 改善 和 维护 。 
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7.2.2 0000 

















jQuery Form 表单 插件 的 下 载 地 址 为 : 








http://jquery.malsup.com/form/#download 
图 7-9 所 示 的 界面 中 ， 读 者 可 以 下 载 该 插件 ， 并 在 该 网 站 上 得 看 简单 上 手 说 明 、API、 实 例 














Sy 
TT 



































代码 。 文 件 上 传说 明和 FAQ 等 。 


全 jQuery Form Plusin 


Options Examples Form Fields FAQ Download 





Download 


The Official Form Plugin is available here: jquery.form.js or from the plugin's Github repository@. 
There are many other useful Form Plugins@ available from the jQuery Plugins®@ page. 


Support 


Support for the Form Plugin is available through the jQuery Google Group®. This is a very active 
group to which many jQuery developers and users subscribe. 


0 7-9 jQuery FormDOUO0O0U000D0 


7:2:3” 山 四 已 回 




















在 HTML 页 面 上 添加 一 个 form 表单 ,然后 引入 jQuery 库 和 Form 插件 , 并 编写 Ajax 提交 jQuery 
代码 如 下 : 


























<head> 
<script src="../../scripts/jquery.js"type="text/javascript"></script> 
<script src="1ib/jquery.form.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//0D0 DoMODOD 
$(document).ready(function() { 
/00 id0 myrorm0O00000000000000 
$( 加 yForm' ) .ajaxForm(function() { 
SO ou ne a [a se ye 
] 
os 
</script> 
</head> 
<form id="myForm" action="demo.php" method="post"> 
000 <input type="text" name="name” /> <br/> 
000 <input type="text" name="address” /><br/> 
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D00000 <textarea name="comment"></textarea> <br/> 

<input type="submit" id="test" value="00" /> <br/> 

<div id="output1” style="display:none;"></div> 
</form> 


当 表 单 被 提交 时 ,“ 姓 名 ”“ 地 址 ”和 “自我 介绍 ”字段 的 值 会 以 无 刷新 的 方式 提交 到 文件 
demo.php 中 。 如 果 服 务 器 返回 一 个 成 功 状态 ， 那 么 用 户 将 会 看 到 “提交 成 功 ! 欢迎 下 次 再 来 !” 的 
提示 。 















































7.2.4 000D0 一 aaxFormOO ajaxSubmit() 





正如 上 例 的 代码 所 示 ， 通 过 核心 方法 ajaxForm()， 能 很 容易 地 将 表单 升级 为 Ajax 提交 方式 。 





$( jyForm ) .ajaxForm(function() { 
$('#output1') .html (O00000000000").showO): 
1 


Form 插件 还 有 一 个 核心 方法 ajaxSubmit0， 也 能 完成 同样 的 功能 ， 代 码 如 下 ; 








$( 加 yForm' ) .Submit(Cfunction() { 
$(this).ajaxSsubmit(function() { 
HO OU DU sho 





os 
Peeve al se a a 
Ds 
通过 调用 ajaxSubmit(O 方 法 来 响应 用 户 的 提交 表单 操作 ， 从 而 使 表单 的 提交 方式 由 传统 的 提 
交 方 式 转变 为 Ajax 提交 方式 。 
通过 Form 插件 的 这 两 个 核心 方法 ,都 可 以 在 不 修改 表单 的 HTML 代码 结构 的 情况 下 , 轻易 地 
将 表单 的 提交 方式 升级 为 Ajax 提交 方式 。 




























































































7.2.5 aaxFormOU 0D 0 aaxSsubmitO0 DUODUDD 


ajaxForm(O 方 法 和 ajaxSubmit0 方 法 都 能 接受 0 个 或 者 1 个 参数 。 当 为 单个 的 参数 时 ， 该 参数 既 
可 以 是 一 个 回调 函数 ， 也 可 以 是 一 个 options 对 象 。 上 面 例子 的 参数 就 是 回调 函数 。 接 下 来 介绍 
options 对 象 ， 通 过 给 ajaxFormO 方 法 和 ajaxSubmitO 方 法 传递 options 对 象 ， 使 得 它们 对 表单 拥有 更 
多 的 控制 权 。 


先 定义 一 个 对 象 options， 然 后 在 对 象 里 设置 参数 ， 代 码 如 下 : 




































































Var options = { 
target: '#outputl', sa wel await oo or 
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beforeSubmit: ShowRequest ， 2 i ag 


SUCCess: showResponse pag oi a a a a 

wl en 

type: type, //0DOD form0 method ('get' or 'post JO000000000 
dataType: null, en Ser oO sn oe on I 


clearForm: true, ja oo a a aa a ag a 

resetForm: true ， a oo oo oh oo a a a a a a 

timeout: 3000 VO Was 
pe 


定义 options 对 象 之 后 ， 就 可 以 把 这 个 options 对 象 传递 给 ajaxForm() 方 法 ，jQuery 代码 如 下 : 








$('#myForm' ) .ajaxForm(options ) : 


或 者 传递 给 ajaxSubmit(0 方 法 ，jQuery 代码 如 下 : 





$( 加 yForm' ) .Submit(Cfunction() { 
$(this).ajaxSubmit(options ) : 
return false: 


DD 

在 options 对 象 里 ， 指 定 了 两 个 回调 函数 ， 即 beforeSubmit: showRequest 和 success: show 
Response， 它 们 分 别 会 在 表单 提交 前 和 表单 提交 后 被 调用 。 

下 面 来 看 看 这 两 个 回调 函数 具体 有 哪些 参数 。 


加 ”beforeSubmit 一 一 提交 前 的 回调 函数 


提交 前 的 回调 函数 的 代码 如 下 : 















































此 
迄 





























function showRequest(formData, jqForm, options) { 
var queryString = $.param(formData); 
eliupnne ue 


} 

这 个 回调 函数 有 3 个 参数 。 

第 1 个 参数 formdata 是 数组 对 象 。 在 这 里 ， 使 用 $.param() 方 法 把 它 转化 为 字符 串 ， 得 到 如 下 这 
种 格式 : 





























name=1&address=2 


需要 注意 的 是 ， 当 表单 提交 时 ，Form 插件 会 以 Ajax 方式 自动 提交 这 些 数据 。 


























第 2 个 参数 jqForm 是 一 个 jQuery 对 象 ， 它 封装 了 表单 的 元 素 。 





如 果 需 要 访问 jqForm 的 DOM 元素 ， 可 以 把 jqForm 转换 为 DOM 对 象 。 
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070 jQuery00000000 


var formElement = jqForm[0]:; 
var address = formElement.address .value: 

















第 3 个 参数 options 就 是 options 对 象 。 前 面 已 经 声明 了 options 对 象 里 的 一 些 
声明 的 ， 则 会 使 用 默认 的 属性 。 


在 这 个 回调 函数 中 ， 只 要 不 返 
提交 。 可 以 利用 这 个 特性 ， 在 表单 
则 阻止 表单 提交 。 





属性 ， 其 他 没有 





遇 | 











| 



































回 falses 表单 都 将 被 允许 提交 ;如果 返回 false， 则 会 阻止 表单 
提交 之 前 验证 数据 (后 面 将 详细 讲解 )， 如 果 不 符合 验证 规则 ， 










































































加 success 一 一 提交 后 的 回调 函数 


提交 后 的 回调 函数 的 代码 如 下 : 





function showResponse(responseText, statusText , xhr, $form) { 
allerte a stavus exo aesponselexne 
} 


success 有 4 个 参数 responseText，statusText，xhr 和 $form。 其 中 responseText 和 statusText2 个 


比较 常用 。 








statusText 只 是 一 个 返回 状态 ， 例 如 success、error 等 。 














responseText 携带 着 服务 器 返回 的 数据 内 容 。responseText 会 根据 设置 的 options 对 象 中 的 
dataType 属性 来 返回 相应 格式 的 内 容 。 具 体 情 况 如 下 。 


(1) 对 于 缺 省 的 HTML 返回 ， 回 调 函数 的 第 1 个 参数 是 XMLHttpRequest 对 象 的 responseText 





















































rr 
































(2) 当 dataType 属性 被 设置 为 xml 时 ， 回 调 函 数 的 第 1 个 参数 是 XMLHttpRequest 对 象 的 
responseXML 属性 。 




















例如 声明 服务 器 返回 数据 的 类 型 为 xml， 然 后 以 XML 方式 解析 数据 ， 代 码 如 下 : 
$('#xmlForm' ) .ajaxForm({ 

dataType: xml ， 

SUCCess : processxml 


下 

function processxml (responseXML) { 
var name = $('name', responseXML).text(); 
var address = $("'address', responseXML ).text(): 
$('#xmlOut').htmi(name + " "+ address ); 











(3) 当 dataType 属性 被 设置 为 json 时， 回调 函数 的 第 1 个 参数 是 从 服务 器 返回 的 json 数据 对 象 。 
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例如 声明 服务 器 返回 数据 的 类 型 为 json， 然 后 以 json 方式 解析 数据 ， 代 码 如 下 : 


$('#myForm' ) .ajaxForm({ 
dataType: “jsSon ， 
SUCCeSsS : processJson 
js 
function processJson(data) { 
$('#jsonOut').html( data.name + " "+data.address ):; 
b 





72.6 0000000000 




















大 多 数 情况 下 ， 需 要 在 表单 提交 前 对 表单 元 素 的 值 进 行 一 次 验证 ， 如 果 不 符合 验证 规则 ， 则 
阻 上 表单 提交 。 















































beforeSubmit 会 在 表单 提交 前 被 调用 。 如 果 beforeSubmit 返回 false， 则 会 阻止 表单 提交 ， 利 
用 这 个 特性 ， 就 可 以 轻松 地 完成 验证 表单 元 素 的 任务 。 

















f 先 定义 一 个 validate 回调 函数 ， 把 它 设置 为 beforeSubmit 的 值 。 



































beforeSubmit: validate 


然后 编写 validate 函数 ， 它 有 3 个 参数 : 


























function validate(formData, jqForm, options) { 
/* 
(ON oN a oe oa a a a a io 
es ea 
yy 


var queryString = $.param(formData); //0 000 
eisupmn rues 


} 





























通过 获取 表单 元 素 的 值 ， 对 表单 元 素 进 行 验证 。Form 插件 获取 表单 数据 的 方式 有 多 种 ， 下 再 
讲解 其 中 的 3 种 方式 。 


日 方式 1: 利用 参数 formData 












































FT 





参数 formData 是 一 个 数组 对 象 ， 其 中 的 每 个 对 象 都 有 名 称 和 值 。 其 数据 格式 如 下 : 
[ 


{ name: name , value: nameValue }, 
{ name: password , value: passwordValue } 
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070 jQuery00000000 











由 于 是 数组 ， 因 此 可 以 根据 循环 来 获取 每 个 元 素 的 值 ， 然 后 判断 元 素 的 值 是 否 符合 验证 规则 
《这 里 只 判断 元 素 是 否 为 空 )， 如 果 有 一 项 不 符合 验证 规则 ， 就 返回 false， 来 阻止 表单 提交 。 代 码 
如 下 : 







































































function validate(formData, jqForm, options) { 
for(var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert(' 用 户 名 ,地 址 和 自我 介绍 都 不 能 为 空 !'); 
return false; 


} 
var queryString = $.param(formData): 
fewunnme ees 





名 称 ， [ZTCTTTTTN x 
地 址 ， 站 各. 吉 Hu 和 人 8 相 不 能 为 ! 


自我 介绍 ， -一 
提交 | | | 














0710000000 
加 方式 2: 利用 参数 jqForm 


不 仅 可 以 利用 第 1 个 参数 formData 来 获取 表单 数据 ,而 且 可 以 用 第 2 个 参数 jqForm 来 达到 同 
音 的 效果 。 


参数 jqForm 是 一 个 jQuery 对 象 ， 它 封装 了 表单 的 元 素 。 如 果 需 要 访问 jqForm 的 DOM 元 素 ， 
可 以 把 jgForm 转 为 DOM 对 象 。 























~ 








var form = jqForm[0]; 


然后 通过 form.name.value 来 获取 用 户 名 的 值 ， 通 过 form.address.value 来 获取 地 址 的 值 。 代 码 
如 下 : 
























































function validate(formData, jqForm, options) { 

var form = jqForm[0]; 

if (!form.name.value || !form.address.value) { 
alert(' 用 户 名 和 地 址 不 能 为 空 ， 自 我 介绍 可 以 为 空 !') 
return false; 

} 

var queryString = $.param(formData):; 

meuunne mues 
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加 方式 3: 利用 fieldValue0) 方 法 

















fieldvalue() 方 法 会 把 匹配 元 素 的 值 插入 到 数组 中 ， 然 后 返回 这 个 数组 。 如 果 表 单元 素 的 值 被 判 
定 无 效 ， 则 数组 为 空 ， 否 则 数组 将 包含 一 个 或 多 个 元 素 的 值 。 由 于 返回 的 是 一 个 数组 ， 而 不 是 jQuery 
对 象 ， 因 此 不 能 进行 链 式 操作 。 


利用 fieldvalue0 方 法 ， 也 能 很 容易 地 获取 到 表单 元 素 的 值 。 例 如 可 以 通过 $Cinput[name= 
address]').fieldValue() 来 获取 name 为 “address” 的 <input> 元 素 的 值 的 数组 集合 ， 然 后 通过 数组 下 标 
来 获取 数组 中 对 应 的 值 。 


代码 如 下 : 





































































































function validate(formData, jqForm, options) { 
var usernameValue = $('input[name=name]').fieldValue(); 
var addressValue = $('input[name=address]').fieldValue(); 
if (!lusernameValue[0] || !addressValue[0]) { 
alert(' 用 户 名 和 地 址 不 能 为 空 ， 自 我 介绍 可 以 为 空 ! '); 
return false; 
} 
var queryString = $.param(formData); /]DDDD 
IE 


} 


通过 以 上 几 个 例子 可 以 清楚 地 知道 ， 使 用 jQuery Form 插件 能 够 很 容易 地 把 一 个 传统 的 表单 提 
交 方 式 改变 为 Ajax 提交 方式 ， 没 有 比 这 更 简单 的 方法 了 。 




















7.2.7 API 





























Form 插件 拥有 很 多 方法 ， 这 些 方法 可 以 帮助 用 户 很 容易 地 管理 表单 数据 和 表单 提交 。 读 者 
可 以 参考 附录 下 的 API 介绍 。 


F000000— we 




















7.3.1 SimpleModalU U DOD 


SimpleModal 是 一 个 轻 量 级 的 jQuery 插件 ， 它 为 模 态 窗口 的 开发 提供 了 一 个 强 有 力 的 接口 ,可 
以 把 它 当 作 模 态 窗口 的 框架 。SimpleModal 非常 的 灵活 ， 可 以 创建 你 能 够 想像 到 的 任何 东西 ， 并 
你 还 不 需要 考虑 UI 开发 中 的 跨 浏 览 器 相关 问题 。 


Eric Martin 设计 了 SimpleModal 插件 ， 并 一 直 在 进行 改善 和 维护 。 
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D0 70 jQuery 





















































32 上 L 轴 业 刷 


jQuery SimpleModal 插件 的 下 载 地 址 为 : 





http:/www.ericmmartin.com/projects/simplemodal/ 


在 图 7-11 所 示 界 面 中 ， 读 者 可 以 下 载 该 插件 、 碍 看 英文 文档 和 版 本 更 新 说 明 等 。 


























小 1have a collection of os that feature the different 


View Demos 


DOWNLOAD 


SimpleModal is ho 


Download SimpleModal 


There are tw 





D7-11 9impleModalDODOOODO 


7.3.3 DUOOD 


SimpleModal 提供 了 两 种 简单 方法 来 调用 模 态 窗口 


第 一 种 方法 是 作为 一 个 链 式 的 jQuery 函数 。 你 可 以 在 一 个 用 jQuery 获取 的 元 素 上 调用 modalO0 
函数 ， 之 后 用 这 个 元 素 的 内 容 来 显示 一 个 模 态 窗口 。 比 如 : 


























$("#element-id").modal(): 


第 二 种 方法 是 作为 一 个 单独 函数 使 用 。 通 过 传递 一 个 jQuery 对 象 ， DOM 元 素 或 纯 文本 (可 以 
包含 HTML) 来 创建 一 个 模 态 窗口 。 比 如 : 





























$.modal("<div><hl>SimpleModal</h1l></div>"); 


以 上 的 两 种 方法 都 可 以 接受 一 个 可 选 参数 ， 比 如 : 








$("#element-id").modal({foptions)); 
$.modal("<div><hl>SimpleModal</hl></div>", {options}); 

丸 为 SimpleModal 不 仅仅 是 一 个 模 态 窗口 框架 , 以 上 的 两 个 例子 只 是 创建 非常 基本 的 没有 样式 
模 态 窗口 。 你 也 可 以 通过 外 部 CSS， 选 项 对 象 或 两 个 一 起 来 应 用 样式 。modal overlay、container 和 
data 元 素 的 CSS 选项 分 别 是 : overlayCss、containerCss 和 dataCss， 它 们 都 是 键 值 对 (Key/Value) 
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000 jQueyI0 200 








属性 。SimpleModal 为 显示 一 个 模 态 窗口 设置 了 必要 的 CSS， 男 外 它 动态 地 把 模 态 窗 口 置 于 屏幕 中 





间 ， 除 非 预 先 使 用 了 position 参数 。 


SimpleModal 在 内 部 定义 了 如 下 CSS 类 : simplemodal-overlay，simplemodal-container，simplemodal- 
Wra 容 比 container 大 ， 那 么 它 将 自动 设置 overflow 为 auto simplemodal-data。 
p 《如 果 内 容 比 iner 大 ， 那 么 它 将 自动 设置 overflow 为 auto) 和 simplemodal-d 



































SimpleModal 的 closeHTML 参数 默认 声明 一 个 用 于 关闭 模 态 窗口 的 图 片 样式 : modalcloseImg， 
因为 它 被 定义 在 参数 里 面 ， 不 能 通过 参数 来 应 用 样式 ， 所 以 一 个 外 部 CSS 定义 是 必须 的 。 



































#simplemodal-container a.modalCloseImg { 





background:url(/img/x.png) no-repeat; /* adjust url as required */ 


width : 


25px; 


height :29px; 
display:inline; 
z-index:3200; 
position:absolute; 


top:-15px; 


gn 


-18px; 


CUrsor pointer 


} 














如 果 IE6 你 也 想 用 PNG 图 片 的话 ， 你 可 能 要 这 么 做 : 














<< pf 
<style type='text/css'> 


#simp] 


用 


wi 





emodal-container a.modalCloseImg { 


background:none 
ight:-14px; 


dth:22px:; 


height :26px; 
位 


lter: progid:DXImageTransform.Microsoft.AlphalmageLoader( 
Src= ' img/x.png ，SizingMethod= scale 


} 
</Sty1e> 
<!l[endif]--> 
7.3.4 D000000O 


SimpleModal 自动 为 模 态 窗口 内 class 是 “simplemodal-close” 的 元 素 绑 定 了 关闭 函数 。 所 以 只 





























要 在 HTML 中 添加 如 下 代码 就 可 以 关闭 窗口 : 
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070 jQuery00000000 


<button type="button" class="simplemodal-close">[] 0D </button> 
部 加 


<a href="#" class="simplemodal-close">[] [0 </a> 


此 外 ， 你 也 可 以 通过 调用 $.modal.closeO 的 方式 关闭 当前 打开 的 模 态 窗口 



























































改 全 局 参数 ， 代 码 如 下 : 





.modal .defaults.closeClass = "modalClose"; 
以 上 代码 将 会 为 class 为 “modalClose” 绑 定 关 闭 函 数 。 
如 果 要 修改 多 个 默认 参数 ， 可 以 使 用 如 下 代码 : 




















$.extend($.modal.defaults, { 
closeClass: "modalClose", 
closeHTML: "<a href='#'>Close</a>" 


7.3.5 DUODOOD 











接 下 来 我 们 使 用 SimpleModal 来 制作 模 态 提示 框 和 模 态 的 iframe。 
和 先 我 们 在 页 面 中 插入 将 要 弹出 的 内 容 ， 并 把 样式 设置 好 : 







































































<div id="basic-dialog-warn"> 
== 加 加 > 
<div class="box-title show"><h2>0 0 </h2></div> 


<div class="box-main"> 





<div class="tips"> 
<span class="tips-ico"> 
<span class="ico-warn"><!-- D0 --></span> 
</span> 
<div class="tips-content "> 
=v eass= DS eA 
<div class="tips-1ine"></div> 
</div> 
</div> 
<div class="box-buttons"><button type="button" class="simplemodal-close">[ 


</div> 
< | 且 过 
</div> 


如 果 你 不 想 使 用 “simplemodal-close ”作为 默认 的 关闭 接口 ， 而 是 想 自己 定义 ， 那 么 你 可 以 修 


0 </button></div> 
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0U00Ujouery00 200 

















然后 我 们 就 可 以 利用 下 面 的 代码 调用 SimpleModal: 




















$('#basic-dialog-warn' ).modal(): 


弹出 效果 如 图 7-12 所 示 。 





提示 


(| 证 ， 语 币 全 重 斌 





07-12 0000 
同样 ， 如 果 要 弹出 一 个 iframe 页 面 ， 那 么 使 用 方式 也 类 似 。 
先 还 是 在 页 面 中 新 建 一 段 HTML 代码 ， 代 码 如 下 : 















































<div id="ifr-dialog” > 

<!-- iframeD00 [CC --> 

<iframe frameborder="0" scrolling="no" id="ifr-dialog-container" 
src="javascript:;" class="box-iframe"></iframe> 

<!-- iframe0D00 ]] --> 
</div> 


此 时 iframe 的 src 是 没有 指向 地 址 ， 我 们 可 以 在 调用 SimpleModal 的 时 候 ， 给 它 赋 一 个 值 ， 代 
码 如 下 : 














$("#ifr-dialog-container").attr("src", "http://www.baidu.com"); 
$('#ifr-dialog').modal({ 
ae se 
"overlayClose" :true, 
"containerId":"ifr-dialog-content" 


bs 


这 样 ， 我 们 就 能 把 iframe 页 面 以 模 态 窗口 的 方式 显示 出 来 了 。 在 以 上 代码 中 ， 在 调用 
SimpleModal 时 ， 设 置 了 3 个 参数 。"opacity" 是 用 来 设置 庶 黑 层 的 不 透明 度 的 。"overlayClose" 
设置 为 tue， 代 表 着 单 击 遮 罩 层 也 能 关闭 模 态 窗口 。"containerId" 是 一 个 非常 有 用 的 参数 ， 它 用 
来 设置 模 态 窗口 容器 的 ID (默认 值 为 simplemodal-container)， 通 过 这 个 钩子 ， 我 们 能 为 容器 定 
义 各 种 规则 。 比 如 本 例 中 ， 容 器 的 ID 被 设置 为 ifr-dialog-content， 在 CSS 样式 中 ， 为 它 设置 的 
样式 如 下 : 


































































































#ifr-dialog-content{ 
height :300px: 


width:700px: 


7.3.6 API 


SimpleModal 插件 的 官方 API 地 址 为 : 


http:/www.ericmmartin.com/projects/simplemodal/ 


关于 SimpleModal 插件 的 API 内 容 ， 读 者 可 以 参考 附录 下 的 介绍 。 
D0 “mk0 0 0 一 一 :ak 


7.4.1 Cookie0000 








Cookie 是 网 站 设计 者 放置 在 客户 端的 小 文本 文件 。Cookie 能 为 用 户 提 供 很 多 的 便利 , 例如 
购物 网 站 存储 用 户 曾经 浏览 过 的 产品 列表 ， 或 者 门户 网 站 记 住 用 户 喜 欢 选 择 浏览 哪 类 新 闻 。 在 
还 可 以 存储 用 户 的 登录 信息 ， 使 得 用 户 在 访问 网 站 时 不 必 每 次 都 键入 这 些 








用 户 允 许 的 情况 下 ， 
信息 。 
































jQuery 提供 了 一 个 十 分 简单 的 插件 来 管理 网 站 的 Cookie， 该 插件 的 名 称 也 是 Cookie。Carhartl 








设计 了 该 插件 。 


7.4.2 0000 


jQuery Cookie 扣 


https://github.com/carhartl/jquery-cookie 











i 件 的 下 载 地 址 为 : 











在 图 7-13 所 示 的 界面 中 ， 读 者 可 以 下 载 访 插件、 访问 cookie 插件 的 主页 等 。 




















jquery-cookie / 
name age 
README md 2 months ago 
jquery.cookie js a month ago 
semver.js 2 months ago 
test.html a year ago 
test.js 2 months ago 


3 





message 
fixed last headline [carhatl] 

fixing header [carhartl] 

server listening at 0.0.0.0, seems to only work w/ Bonjour and F 
quickly set up a node server to be able to prmore reliably test ct 


don't be too restrictive about the value, closes #46 [carhartl 


cookieU0OOO00D 
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7.4.3 DO0ODOD 








Cookie 插件 是 极其 轻 量 级 的 插件 ， 使 用 起 来 也 比较 简单 。 


suDOGDDEN En UB AAWSEAAD 


transitional.dtd"> 
<html xmins="http://www.w3.org/ 
<head> 
<title></title> 

















看 下 面 的 例子 : 





TD XHTML 1.0 Transitional//EN" "ht 





999/xhtml"> 


tp://www.w3.org/TR/xhtml1/DTD/xhtml1- 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


SO 
SB 





<script type="text/javascript"> 
$(function() { 
var COOKIE NAME = 'username 


if( $.cookie(COOKIE NAME) ){ 


$("#username").vall 


} 


$.cookie(COOKIE NAME) ): 


$("#check").click(function(){ 


if(this.checked){ 


$.cookie(COOKIE NAME, $("#username").val() , { path: 


}else{ 





$.cookie(COOKIE NAME, null, { path: '/"' 


je 
js 
/Sen 
</head> 
<body> 


| 


ipt src="../../scripts/jquery.js" type="text/javascript"></script> 
ipt src="js/jquery.cookie.js" type="text/javascript"></script> 


Wexnires lO 


0000<input type="text" name="username" id="Username"/> <br/> 


<input type="checkbox” name= 


</body> 
</html> 


当 在 用 








户 名 字段 填写 用 





户 名 后 ， 单 放 


"check" id="check"/>D0000O 














和 下 面 的 “ 记 住 用 户 名 ” 复 选 框 ， 使 之 处 于 选中 状态 ， 


比 时 





用 户 名 的 值 已 经 被 计 入 Cookie 中 ， 如 图 7-14 所 示 。 接 下 来 ， 读 者 可 以 关闭 浏览 器 ， 然 后 重新 打开 这 























个 页 面 ， 发 现 用 户 名 字段 











岗 





EF 已 经 被 自动 赋值 。 如 话 








加 




















用 户 名 ， 
三 记 住 用 户 名 


0D 7-14 











0000D0 





用 户 名 : |admin 
区 记 住 用 户 名 


D715 0000000 











7-15 和 图 7-16 所 示 。 








用 户 名 : [admin 
口 记 住 用 户 名 


0716 0000000 
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7.4.4 API 


加 写 入 Cookie。 


$.cookie( the cookie ， "the value ' ) : 





说 明 : “the cookie” 为 待 写 入 的 Cookie 名 , “the value” 为 待 写 入 的 值 。 





日 ” 读 取 Cookie。 


$.cookie('the cookie'); 





说 明 : “the_cookie” 为 待 读 取 的 Cookie 名 。 





加 ”删除 Cookie。 


$.cookie(' the cookie  ，nul1) 





说 明 : “the_cookie” 为 Cookie 名 ， 设 置 为 null 即 删除 此 Cookie。 必 须 使 用 与 之 前 设置 时 相同 的 路 
径 (path ) 和 域名 (domain )， 才 可 以 正确 删除 Cookie。 





图。 其 他 可 选 参数 。 


$.cookie('the cookie ， the value’, { 
Enes 7 
cen 
domain: 'jquery.com', 
SGUAE RU 


DE 





说 明 : 加 expires: (Number|Date ) 有 效 期 。 可 以 设置 一 个 整数 作为 有 效 期 (单位 : 天 )， 也 可 以 
直接 设置 一 个 日期 对 象 作为 Cookie 的 过 期 日 期 。 如 果 指 定 日 期 为 负数 ， 例 如 已 经 过 去 的 日 
子 ， 那 么 此 Cookie 将 被 删除 ; 如 果 不 设置 或 者 设置 为 null， 那 么 此 Cookie 将 被 当 作 Session 
Cookie 处 理 ， 并 且 在 浏览 器 关闭 后 删除 。 
四 path: (String ) cookie 的 路 径 属性 。 默 认 是 创建 该 Cookie 的 页 面 路 径 。 
加 domain: (String ) cookie 的 域名 属性 。 默 认 是 创建 该 Cookie 的 页 面 域名 。 
加 secure: (Boolean ) 如 果 设 为 true， 那 么 此 Cookie 的 传输 会 要 求 一 个 安全 协议 ， 例 如 

HTTPS. 
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wig 0 0 


:5:1 


jQuery UI (http://ui.jquery.com) 源 自 于 一 个 jQuery 插件 
Petre 创建 的 ，Paul Bakaus 也 为 该 插件 的 开发 做 出 了 重大 贡献 。Interface 插 们 


jQuery UIDD 






































Interface 。Interface 插件 是 
最 早 版 本 为 1.2， 只 文 














| Stefan 





持 jQuery 1.1.2 的 版 本 ， 后 来 在 Paul Bakaus 等 人 领导 下 ， 将 Interface 的 大 部 分 代码 基于 jQuery 1.2 


的 API 


改名 为 jQuery UI， 同 时 也 确立 了 jQuery UI 官方 插件 的 地 位 


核 的 逐渐 完善 ， 因 此 jQuery UI 很 有 可 能 是 jQuery 今后 发 展 的 本 

















进行 重 构 ， 

















并 统一 了 API。 由 于 改进 重大 ， 因 此 版 本 号 不 是 1. 
























































jQuery UI 主要 分 为 3 个 部 分 ， 交 互 、 微 件 和 效果 库 : 














3 而 是 直接 跳 到 了 1.5， 并 且 





， 并 逐步 走向 完善 。 由 于 jQuery 本 里 内 








三 点 ， 也 预示 着 jQuery 未 来 的 走向 。 


加 ”交互 。 这 里 都 是 一 些 与 鼠标 交互 相关 的 内 容 。 包 括 拖 动 (Draggable )、 置 放 (Droppable )、 缩 
放 (Resizable )、 选 择 (Selectable ) 和 排序 (Sortable ) 等 。 
互 组 件 来 制作 的 。 此 库 需 要 一 个 jQuery UI 核心 库 一 一 ui.core.js 支持 。 
微 件 。 这 里 主要 是 一 些 界 面 的 扩展 。 里 边 包 括 了 手风琴 导航 ( Accordion )、 
(Autocomplete )、 取 色 器 ( Colorpicker )、 对 话 框 (Dialog )、 滑 块 (Slider )、 标 签 (Tabs )、 日历 
( Datepicker )、 放大 镜 (Magnifier )、 进 度 条 (Progressbar ) 和 微调 控制 器 ( Spinner ) 等 . 在 将 来 jQuery 
1.7 中 还 会 有 历史 (History)、 布 局 (Layout)、 栅 格 ( Grid ) 和 菜单 (Menu ) 等 . 此 外 , 工具 栏 ( Toolbar ) 
和 上 传 组 件 ( Uploader ) 也 正在 讨论 中 。 此 库 需 要 一 个 jQuery UI 核心 库 ui.core.js 的 支持 。 
效果 库 。 此 库 用 于 提供 丰富 的 动画 效果 ， 让 动画 不 再 局 限于 animate() 方 法 。 效 果 库 有 自 
己 的 一 套 核 心 即 effects.core.js， 无 需 jQuery UI 的 核心 库 ui.core.js 支持 。 


© 
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7.5.2 


jQuery UI 插 伯 


UUUD0 





F 的 下 载 地 址 为 : 


http://ui.jquery.com/download。 


在 图 





7-17 所 示 界 面 中 ， 读 者 可 以 下 载 该 插件 。 





单 击 右 上 





TT 





























可 以 直接 下 载 完 整套 件 ， 包 括 源码 、 发 行 版 和 测试 驱动 等 。 
或 者 直接 访问 网 址 : 





http://jqueryui.com/download 


如 








图 7-18 所 示 页 面 ， 可 以 挑选 需要 的 组 件 ， 在 右 侧 选择 jQuery UI 的 版 本 等 ,然后 单 























“Download” 按 钮 便 可 下 载 。 


微 件 (Widget) 中 有 部 分 是 基于 这 些 交 


自动 完成 


区 域 的 “build custom download ”链接 ， 








也 


二 左 侧 的 


070 jQuery0000000D0 






jQuery UI provides abstractions for low-level interaction and 
animation, advanced effects and high-level, themeable 


Build custom download 


widgets, built on top of the jQuery JavaScript Library, that 
you can use to build highly interactive web applications. 


jQuery UI 1.8 adds position， 
button, autocomplete, new 
widget factory, lishter core. 
What's new © 


GJjQuerY 


Help us design future plugins 
Planning wiki © 





Rich effects and UI widgets Powerful theme framework Flexible & easy to learn Developer links 


0717 jQuery VOU0000O 


Build Your Download 


Customize your jQuery UI download by selecting the version and specific modules you 


need in the form below or select a quick download package. A range of current and 
historical jQuery Ul releases are also hosted on Google's CDN. 


Quick downloads: Stable (Themes) 11.8.18: for jQ 1.3.2+) | Legacy (Themes) (1.7.3: for 





Source (pre-build): Stable (1.8.18: for jQuery 1.3.2:) | Master (unreleased) | GitHub repo 





Components (31 of 31 selected) ® Deselect all components Theme 


Select the theme you want to 
include or desien a custom 


























theme 
U Core 加 Core The core of jQuery Ul, required for all 村 交 2 
A required dependency interactions and widgets. Ul lightness > 
contains basic functions and 

JJ Widget The widget factory, base for all widgets Advanced Theme Settings 

可 Mouse The mouse widget, a base class for all 

interactions and widgets with heavy mouse interaction. dit 

es gk 3 I si 
可 position Autitty plugin for positioning elements relative Sn Fe Ens vee 








Want to download. 
to other elements. 



































© 1.8.18 
{Stable, for jQuery 1.3.2+) 
® Deselect all Oo 
& ) 1.7.3 
Interactions 回 Drageable Makes any element on the page draggable. (Legacy release, for jQuery 
These add basic behaviors to 1.3.2) 
a ment and are used by YI Droppable Generated drop tarsets for draggable elements. 
y components below 
Y| Resizable Makes any element on the page resizable. 
Yj Selectable Makes a list of elements mouse selectable by 
drageging a box or clicking on them. 
¥| Sortable Makes a list of items sortable 








0718 0000 
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5 思 四 回回 








jQuery UI 插件 的 大 部 分 API 已 经 统一 了 。 以 Draggables 为 例 ， 有 4 个 基本 的 API。 


加 draggable( options ): 这 是 用 来 让 一 个 DOM 对 象 变 成 可 拖 动 的 对 象 的 方法 。 其 中 的 options 
可 以 设置 各 种 不 同 的 参数 。 

加 draggable ("disable" ): 让 对 应 的 DOM 对 象 暂时 禁用 拖 动 。 

图。 draggable ("enable" ): 让 对 应 的 DOM 对 象 重 新 启用 拖 动 。 

加 draggable ("destroy" ): 彻底 移 除 拖 动 功能 。 




























































































以 上 这 些 就 是 jQuery UI 中 大 部 分 插件 通用 的 用 法 。jQuery UI 插件 系列 众多 ， 鉴 于 文章 篇 幅 有 限 ， 
这 里 只 挑选 出 其 中 一 个 实用 的 拖 动 排序 组 件 Sortable 来 进行 简单 介绍 和 讲解 ， 局 1 展 
其 他 组 件 读 者 可 以 自行 参考 jQuery UI 的 官方 网 站 。 | 
图 7-19 是 某 个 网 站 右 侧 的 一 些 条 目 ， 这 些 条 目 允 许 用 户 更 改 它们 的 
顺序 ， 即 个 性 化 。 利 用 jQuery UI 中 的 Sortable 插件 ， 可 以 容易 地 实现 这 本 她 群 组 
来 很 复杂 的 一 系列 操作 。 D719 0000000 

















先 构建 一 个 简单 的 HTML 结构 并 且 引 入 Sortable 库 , 以 及 其 依赖 的 ui.core.js, 完整 程序 代码 








如 下 : 





人 


1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type” content="text/html; charset=utf-8”/> 
<title>jQuery UI Sortable</title> 
<style type="text/css"> 
#myList {width: 80px; background: #EEE; padding: 5px; } 
#myList a{text-decoration: none; color: #0077B0; } 
#myList a:hover{text-decoration: underline; } 
#myList .qlink{font-size: 12px; color: #666; margin-left: 10px; } 
</style> 

</head> 

<body> 

<ul id="myList"> 

<1i><a href="#">0 0 </a></1i> 

eli 

<a href="#">0 0 </a> 
<a href="#" class="glink">0 0 </a> 
</1i> 
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-相隔 必 3 
<a href="#">0 0 </a> 
<a href="#" class="glink">0 0 </a> 


<1i><a href="#">0 0 </a></1i> 
<1i><a href="#">0 0 </a></1i> 
<1i><a href="#">0 0 </a></1i> 





ipt type="text/javascript" src="../../scripts/jquery.js"></script> 
ipt type="text/javascript" src="js/jquery.ui.core.js"></script> 
ipt type="text/javascript" src="js/jquery.ui.widget.js"></script> 


ipt type="text/javascript" src="js/jquery.ui.sortable.js"></script> 
ipt type="text/javascript"> 
ent).ready(function(){ 

Co me Joe A a sl a 











p 
p 
p 
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script> 
p 
p 
U 








Se 
</body> 
</html> 


运行 上 面 的 代码 ， 列 表 元 素 就 可 以 拖 动 排 序 了 ， 如 图 7-20 所 示 。 

















投票 


八 言 











































































































上 面 的 代码 中 ， 引 入 的 脚本 都 是 sortable 插件 所 必需 的 ， 没 有 引用 多 余 的 4 上 
脚本 ， 如 果 你 对 ui 插件 的 依赖 关系 不 是 太 了 解 ， 并 对 脚本 的 大 小 不 是 太 关注 oh 
的 话 ， 那 么 可 以 使 用 jQuery UI 提供 的 custom 包 ， 它 包含 了 jQuery UI 的 所 有 a 
扩展 ， 是 一 个 通用 包 。 0 7-20 0000 





<script type="text/javascript”" src="jquery-ui-0 O00 .custom.js"></script> 


724 0U0000060 

















一 二 














在 菜 些 特殊 情况 下 会 因为 拖 动 事件 抢 在 单 击 事件 之 前 而 导致 单 击 事件 失效 。 如 果 出 现 这 种 情 
况 ， 可 以 设置 参数 delay 延 时 1 毫秒 ， 即 改 为 : 
























































$("#myList").sortable({delay:1}); 


jQuery 调用 代码 为 : 











<script type="text/javascript"> 
$(document).ready(function(){ 
$("#myList").sortable( {delay:1})): 确 回 区 三 三亚 亚 王 加 加 








ys 


/SCP 
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722 00000 


如 果 要 把 Sortable 搬 伯 


























然后 取得 排列 的 
先 解决 回 

代码 修改 为 : 
("#myList") 
delay:1 




































































与 后 台 结 合 ， 需 要 完成 两 件 事情 ， 首 先是 查找 触发 排序 后 的 回调 函数 ， 
顺序 并 通过 Ajax 发 送 给 后 台 。 


调 函 数 。 通 过 查找 API， 知 道 最 符合 要 求 的 回调 函数 是 stop， 因 此 把 前 面 的 jQuery 


.Sortable({ 
5 部 加 加 和 加 各 加 加 思 


stop:function() { 
alert(" 触 发 排序 停止 后 回调 函数 "); 


} 
Ds 


当 拖 动 列表 完成 后 ， 将 会 出 现 


接 下 来 就 需 























图 7-21 的 提示 效果 。 





心情 [JavaScript 应 用 程序 ] 
企 触发 排序 停止 后 回调 函数 














072 0000000 








要 得 到 列表 元 素 拖 动 后 的 顺序 ， 可 以 通过 sortable(serialize) 方 法 直接 获取 元 素 提 























F 列 








的 顺序 。 但 是 排列 要 求 id 符合 特定 的 命名 规范 ， 











是 将 id 修改 为 “name value” 的 形式 。 例 如 ， 这 是 





<ul id="myLi 














EE 还 





昌 然 可 以 自 定义 规则 ， 但 为 了 简化 起 见 ， 这 中 











Si > 








的 <li> 都 改 成 如 下 代码 : 








<1i id="myList mood"><a href="#">0 0 </a></1i> 
<1i id= myList photo"> 


去 /这 


<a href="#">0 0 </a> 
<a href="#" class="glink">0 0 </a> 


<li id="myList_blog"> 


< 


<a href="#">0 0 </a> 
<a href="#" class="glink">0 0 </a> 


<1i id="myList vote"><a href="#">0 0 </a></1i> 
<1i id="myList share"><a href="#">0 0 </a></1i> 
<1i id="myList group"><a href="#">0 0 </a></1i> 





</Ul> 


070 jauerv00000000 











然后 ， 使 用 $(#myList'").sortable('serialize") 方 法 就 能 得 到 以 下 形式 的 数 扫 


Hi 


myList[J=mood&myList[ J]=share&myList[]=photo&myList[]=blog&myList[]=vote&myList[]=group 






































最 后 ， 可 以 利用 Ajax 方法 把 这 组 数据 传递 到 后 台 ， 后 台 得 到 一 个 名 为 myList 的 数组 。 这 里 使 
用 POST 方式 把 数据 提交 给 后 台 ， 代 码 如 下 : 

















$("#myList").sortable({ 
deleveas VA 
stopsrunesionee 
$.post( 
"sortable.php", 
$('#myList').sortable('serialize'), 
function(response) { 





alert(response); 


} 


bs 




















正确 发 送 请 求 后 ，sortable.php 就 可 以 获取 相应 的 顺序 ， 并 且 写 入 数据 库 ， 以 便 保存 用 户 的 个 
性 化 数据 。 在 这 里 并 不 讨论 后 台 如 何 保存 ， 因 为 这 已 经 超出 了 本 书 介绍 的 范围 。 因 此 在 这 里 的 后 台 
程序 中 只 是 简单 处 理 一 下 获取 的 数组 ,， 并且 按 顺序 将 它们 返回 给 前 合 ,， 以 表示 后 台 已 成 功 接受 到 数 
据 并 返回 。 代 码 如 下 : 
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<?php 
$myList = $ POSTL "myList"]; 
foreach( $myList as $list){ 
So 了 SN 


} 


> 


运行 代码 后 ， 效 果 如 图 7-22 所 示 。 





心情 来 自 http://localhost:8011 的 页 面 说 : 
相册 ”上传 
投票 

日 志 发 到 


分 享 
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区 3 


洒 人 4 0 








在 前 面 几 个 章节 中 ， 已 经 介绍 了 jQuery 的 大 部 分 的 基本 应 用 ， 





























这 一 市 将 介绍 如 何 编写 一 个 插件 。 








7.6.1 0000D0 





























| 

















编写 插件 的 目的 是 给 已 经 有 的 一 系列 方法 或 函数 做 一 个 封装 ,以 便 在 其 他 地 方 重 复 使 用 , 方便 
后 期 维护 和 提高 开发 效率 。 








jQuery 的 插件 主要 分 为 3 种 类 型 。 
i0000000000 
这 种 插件 是 将 对 象 方法 封装 起 来 ， 用 于 对 通过 选择 器 获取 的 jQuery 对 象 进行 操作 ， 是 最 常见 





的 一 种 插件 。 
据 不 完全 



































统计 ，95% 以 上 的 jQuery 插件 都 是 封装 对 象 方法 的 插件 。 此 类 插件 可 以 发 挥 出 








同时 也 看 到 了 一 些 不 错 的 插件 。 



































jQuery 选择 器 的 强大 优势 。 有 相当 一 部 分 的 jQuery 的 方法 ， 都 是 在 jQuery 脚本 库 内 部 通过 这 
种 形式 “ 插 ” 在 内 核 上 的 ， 例 如 parent() 方 法 、appendTo(0) 方 法 和 addClass() 方 法 等 不 少 DOM 操 





作 方 法 。 






























































有 不 少 用 户 对 jQuery 没有 提供 color(0) 方 法 而 表示 遗憾 ， 不 得 不 | 


A 


























的 例子 中 将 会 讲解 如 何 编写 一 个 color0 方 法 的 jQuery 插件 。 
200D00000000 


可 以 将 独立 的 函数 加 到 jQuery 命名 空间 之 下 。 例 如 第 1 章 提 到 的 解决 冲突 用 的 jQuery. 
noConflict0 方 法 、 和 常用 的 jQuery.ajax(0 方 法 以 及 去 除 首 位 空格 的 jQuery.trim0 方 法 等 ， 都 是 jQuery 
内 部 作为 全 局 函数 的 插件 附加 到 内 核 上 去 的 。 


3000000 
个 别 情况 下 ， 会 需要 用 到 选择 器 插件 。 虽 然 jQuery 的 选择 器 十 分 强大 ， 但 还 是 会 需要 扩充 一 











些 自己 喜欢 的 选择 器 ， 例 如 用 : color(red) 来 选择 所 有 红色 字 的 元 素 之 类 的 想法 。 












































7.6.2 0000000 





] css("color") 来 代替 。 在 后 面 

















加 jQuery 插件 的 文件 名 推荐 命名 为 jquery.[ 插 件 名 ].js， 以 免 和 其 他 JavaScript 库 插 件 混 消 。 
例如 命名 为 jquery.color.js。 
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日 ”所 有 的 对 象 方法 都 应 当 附加 到 jQuery.fn 对 象 上 ， 而 所 有 的 全 局 函数 都 应 当 附 加 到 jQuery 
对 象 本 身上 。 

加 ”在 插件 内 部 ，this 指向 的 是 当前 通过 选择 器 获取 的 jQuery 对 象 ， 而 不 像 一 般 的 方法 那样 ， 
例如 clickO 方 法 ， 内 部 的 this 指向 的 是 DOM 元 素 。 

图 ”可 以 通过 this.each 来 遍历 所 有 元 素 。 

图 ”所 有 的 方法 或 函数 插件 ， 都 应 当 以 分 号 结尾 ， 否 则 压缩 的 时 候 可 能 出 现 问题 。 为 了 更 稳 
受 些 ,甚至 可 以 在 插件 头 部 先 加 上 一 个 分 号 ， 以免 他 人 的 不 规范 代码 给 插件 带 来 影响 。 具体 方法 可 
以 参考 后 面 的 代码 。 

@ 插件 应 该 返回 一 个 jQuery 对 象 ， 以 保证 插件 的 可 链 式 操作 。 除 非 插件 需要 返回 的 是 一 些 
需要 获取 的 量 ， 例 如 字符 串 或 者 数组 等 。 

加 ”避免 在 插件 内 部 使 用 $ 作 为 jQuery 对 象 的 别名 ， 而 应 使 用 完整 的 jQuery 来 表示 。 这样 
可 以 避免 冲突 。 当 然 , 也 可 以 利用 闭 包 这 种 技巧 来 回避 这 个 问题 ， 使 插件 内 部 继续 使 用 $ 作 为 
jQuery 的 别名 。 很 多 插件 都 是 这 么 做 的 ， 本 书 也 会 利用 这 种 形式 。 


763 000000 








关于 闭 包 ，ECMAScript 对 其 进行 了 简单 的 描述 : 允许 使 用 内 部 函数 〈 即 函数 定义 和 函数 表达 
式 位 于 男 一 个 函数 的 函数 体内 )， 而 且 ， 这 些 内 部 函数 可 以 访问 它们 所 在 的 外 部 函数 中 声明 的 所 有 局 
部 变量 、 参数 和 声明 的 其 他 内 部 函数 ， 当 其 中 一 个 这 样 的 内 部 函数 在 包含 它们 的 外 部 函数 之 外 被 调 
用 时 ， 就 会 形成 闭 包 。 即 内 部 函数 会 在 外 部 函数 返回 后 被 执行 。 而 当 这 个 内 部 函数 执行 时 ， 它 仍然 
必须 访问 其 外 部 函数 的 局 部 变量 、 参 数 以 及 其 他 内 部 函数 。 这 些 局 部 变量 、 参 数 和 函数 声明 (最初 
时 ) 的 值 是 外 部 函数 返回 时 的 值 ， 但 也 会 受到 内 部 函数 的 影响 。 


利用 闭 包 的 特性 ， 既 可 以 避免 内 部 临时 变量 影响 全 局 空间 ， 又 可 以 在 插件 内 部 继续 使 用 $ 作 为 
jQuery 的 别名 。 常 见 的 jQuery 插件 都 是 以 下 这 种 形式 的 : 




























































































了 著 
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(function(){ 
儿 四 攻 加 攻 玫 加 党 
ys 


首先 定义 一 个 匿名 函数 function0{/* 这 里 置 放 代码 */}, 然后 用 括号 括 起 来 , 变 成 (functionO{/* 



















































































这 里 置 放 代 码 */}) 这 种 形式 ， 最 后 通过 0 这 个 运算 符 来 执行 。 可 以 传递 参数 进去 ， 以 供 内 部 函数 
使 用 
加 呈 轩 加 加 本 硬 轩 加 加 
:(function($){ VO a 
VS en 
}) (jQuery); we 





上 有 段 代码 是 一 种 常见 的 jQuery 插件 的 结构 。 
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接 下 来 看 下 面 这 段 jQuery 代码 : 


funesilons 
VA es er 
A of Ta ee 
var foo; 


var bar=function(){ 
/* 














Ee oom en 
Oa ee eo 
oe foo 

2 


/* 
a | 
ED QnA AR 
Oo la ya a oo a a a oa yan /a /ot a a ol a /a a a a a es 

















wy 
$.BAR=bar ; 
}) (jQuery); 
这 里 只 是 简单 地 介绍 了 闭 包 的 概念 ， 显然 闭 包 不 是 儿 句 话 就 能 讲 清楚 的 。 但 对 于 插件 的 制作 来 
说 读者 只 需要 知道 所 有 的 插件 代码 必须 放置 在 下 面 这 两 句 代码 内 就 可 以 了 。 







































































:(function($) { 
VA en 
}) (jQuery); 


如 果 需 要 获取 更 多 关于 财 包 的 知识 ， 读 者 可 以 自行 查阅 相关 资料 。 




















7.6.4 jQueryyD QO00DO 











jQuery 提供 了 两 个 用 于 扩展 jQuery 功能 的 方法 ， 即 jQuery.fn.extend0 方 法 和 jQuery.extend0 方 法 。 
前 者 用 于 扩展 之 前 提 到 的 3 种 类 型 插件 中 的 第 1 种 ,后 者 用 于 扩展 后 两 种 插件 。 这 两 个 方法 都 接受 
一 个 参数 ， 类 型 为 Object。Object 对 象 的 “名 / 值 对 ”分 别 代表 “函数 或 方法 名 /函数 主体 ”。 具 体内 
容 将 会 在 下 面 讲解 。 


jQuery.extend(0 方 法 除了 可 以 用 于 扩展 jQuery 对 象 之 外 ， 还 有 一 个 很 强大 的 功能 ， 就 是 用 于 扩 
展 已 有 的 Object 对 象 。 


jQuery 代码 如 下 : 
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D0 70 
jQuery .extend(target ,objl,...... [objN]) 
用 一 个 或 多 个 其 他 对 象 来 扩展 一 个 对 象 ， 然 后 返回 被 扩展 的 对 象 。 





























例如 合并 settings 对 象 和 options 对 象 ， 修 改 并 返回 settings 对 象 。 


var settings = { validate: false, limit: 5, name: "foo” }; 
Var options = { validate: true, name: "bar™ }; 
var newOptions=jQuery .extend(settings, options): 


结果 为 : 





newOptions = { validate: true limit: 5, name: "bar” }: 


用 于 设置 插件 方法 的 一 系列 默认 参数 ， 如 下 









































jQuery.extend() 方 法 经 常 被 























function foo(options){ 
options=jQuery .extend({ 












































name: "bar", 

length:5, 

dataType: "xml" 2 | 

Dononse pe onenas Oo 
bp 
如 果 用 户 调用 foo0 方 法 的 时 候 ， 在 传递 的 参数 options 对 象 中 设置 了 相应 的 值 ， 寻 
置 的 值 ， 否 则 使 用 默认 值 。 代 码 如 下 : 

foo({ name : "a” , length : "4" ,datalype : "json"}):; 
foo({ name : "a" , length : "4" }); 
foo({ name : "a"” }); 








foo(); 


通过 使 用 jQuery.extend0 方 法 ， 可 以 很 方便 地 


] 传 入 的 参数 来 覆盖 默认 值 。 此 时 ， 









































jQuery00000000 


掉 的 代码 所 示 : 


了 么 就 使 用 设 


对 方法 的 调 


用 依旧 保持 一 致 ， 只 不 过 要 传 入 的 是 一 个 映射 而 不 是 一 个 参数 列表 。 这 种 机 制 比 传统 的 每 个 参数 都 
























































的 代码 ， 从 而 使 开发 者 使 用 起 来 更 加 直观 明了 。 

















7.6.5 00 jQuery0 0 














1| DOI 


| 





jQuery0 0 


编写 设置 和 获取 颜色 的 插件 。 




















© 




















首先 介绍 如 何 编写 一 个 color0 插 件 。 该 插件 用 于 实现 以 下 两 个 功能 。 














去 检测 的 方式 不 仅 灵活 而 且 更 简洁 。 此 外 , 使 用 命名 参数 意味 着 再 添加 新 选项 也 不 会 影响 过 去 编写 
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(1) 设置 匹配 元 素 的 颜色 。 
(2) 获取 匹配 的 元 素 ( 元 素 集合 中 的 第 1 个 ) 的 颜色 。 


让 















































先 将 该 插件 按 规范 命名 为 jquery.color.js。 











然后 在 JavaScript 文件 里 搭 好 框架 ， 代 码 如 下 : 








Une on 


训 加 加 加 加 
}) (jQuery); 
































由 于 是 对 jQuery 对 象 的 方法 扩展 ， 因 此 采用 扩展 第 1 类 插件 的 方法 jQuery.fn.extend0 来 编写 ， 
代码 如 下 : 


;(function($) { 
$.fn.extend({ 
"color" :function(value){ 
CA 


je 
}) (jQuery); 

















这 里 给 这 个 方法 提供 一 个 参数 value, 如 果 调 用 方法 的 时 候 传递 了 value 这 个 参数 , 那么 就 是 月 
这 个 值 来 设置 字体 颜色 ， 否 则 就 是 获取 匹配 元 素 的 字体 颜色 的 值 。 


先 实现 第 1 个 功能 ， 设 置 字体 的 颜色 。 
要 






















































































简单 地 调用 jQuery 提供 的 css0 方 法 ， 直 接 写 成 this.css("color"，value) 即 可 。 注 意 ， 插 件 
的 this 指 问 的 是 jQuery 对 象 ， 而 非 普 通 的 DOM 对象。 接 下 来 要 注意 的 是 ， 插件 如 果 不 需要 返 

“ 符 串 之 类 的 特定 值 ， 应 当 使 其 具有 可 链接 性 。 为 此 ， 直 接 返 回 这 个 this 对 象 ， 由 于 .css0 方 法 也 
返回 调用 它 的 对 象 ， 即 此 处 的 this， 因 此 可 以 将 代码 写成 ; 

































































| 





























:(function($) { 
$.fn.extend({ 
"color":function(value){ 
retrun this.css("color",value); 
}) 
网 
olny 


接 下 来 实现 第 2 个 功能 。 如 果 没 有 给 方法 传递 参数 ， 那 么 就 是 获取 集合 











了 象 中 第 1 个 对 











































































































对 
象 的 color 的 值 。 由 于 法术 生 训 有 返回 第 1 个 匹配 元 素 的 样式 值 的 功能 ， 因 此 此 处 
无 需 通 过 eq0 来 获取 第 1 个 元 素 。 只 要 将 这 两 个 功能 结合 起 来 ,判断 一 下 value 是否 是 undefined 


即 可 。 
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jQuery 代码 如 下 : 


:(function($) { 
$.fn.extend({ 
"color" :function(value){ 
if (value==undefined) { 
enbnissesseolon 
} else { 
return this.css("color",value); 


DE 
}) (jQuery); 


此 时 color0 插 件 的 功能 已 经 全 部 实现 了 , 通过 该 插件 可 以 获取 和 设置 元 素 的 color 值 。 实际 上 
css0) 方 法 内 部 已 经 有 判断 value 是 否 为 undefined 的 机 制 , 所 以 才 可 以 根据 传递 参数 的 不 同 而 返回 不 
同 的 值 。 因 此 ， 可 以 借助 css0 方 法 的 这 个 特性 来 处 理 该 问题 。 删 除 这 ) 部 分 ， 最 终 剩 余 的 代码 实际 上 


与 先前 那 一 段 是 一 样 的 。jQuery 代码 如 下 : 







































































:(function($) { 
jQuery.fn.extend({ 
"color" :function(value){ 
return this.css("color",value); 





DE 
}) (jQuery); 


这 样 一 来 ， 插 件 也 就 编写 完成 了 。 现 在 来 测试 一 下 该 插件 。 
构建 如 下 代码 ， 并 放 入 插件 以 及 测试 代码 。 




















<script type="text/javascript"> 
//0000O 
:(function($) { 
jQuery.fn.extend({ 
"color":function(value){ 
return this.css("color",value): 
} 
1 
}) (jQuery); 


ja og 
$(function(){ 
aol a i oa gl eol [ng 
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er Ol RG OOT NA 


/00U000 dv0ouo0000000 


alert($( "div").color("red")+"nOD object000000 jQuery0 O00 "): 


局 
</ASCPIDES 
<div class="a">red</div> 
<div style="color:blue">blue</div> 
<div style="color:green">green</div> 
<div style="color:yellow">yellow</div> 


运行 代码 后 可 以 看 到 图 7-23 和 图 7-24 所 示 的 效果 。 














[EWE | 


rgb (255, 0, 0) 
返回 字符 审 ， 证 明 此 插件 可 用 。 














red [EME | 

blue 

green [object Object] 

yel low 返回 object 证 明 往 到 的 是 jQuery 对 象 。 














0723 00010000 clorO 





男 外， 如 果 要 定义 一 组 插件 ， 可 以 使 用 如 下 所 示 写 法 : 


nuewnlons 
$.fn.extend({ 
"color" :function(value){ 


已 加 加 加 

后 

"border " :function(value){ 
yo 

De 

"background" :function(value){ 
//000D 

} 

ps 
}) (jQuery); 


加 ”表格 隔行 变色 插件 

















D0724 00000coor00000 























这 里 将 第 5 章 的 表格 隔行 变色 的 代码 制作 成 一 个 插件 ， 以 便于 重复 使 用 。 表 格 隔行 变色 的 


jQuery 代码 如 下 : 


se unody teriodd Naddolass odd 

$("tbody>tr:even").addClass("even"): 

$('tbody>tr').click(function() { 
EE 

















070 jQuery00000000 


var hasSelecteds$(this).hasClass( Selected ) 
//DD0000000 selected0DDDODOD0OD selectedDD 
$(this)[LhasSselected? "removeClass":"addClass"]1('selected') 
/DO0O0O0D0 checkboxg OOODOOODOD 
find( checkbox ) .attr(' checked ,hasSelected) 
be 
Cl 
('tbody>tr:has(:checked)').addClass('selected'); 


和 先 把 插件 方法 取 名 为 alterBgColor， 然 后 为 该 插件 方法 搭 好 框架 ，jQuery 代码 如 下 : 



































TUTeIOG | 
$.fn.extend({ 
"alterBgColor":function(options){ 
到 加 加 回回 
} 
Oe 
}) (jQuery); 


框架 完成 后 ， 接 下 来 就 需要 为 options 定义 默认 值 。 默 认 构 建 这 样 ({odd: "odd"，even:" even"， 
selected:"selected"} ) 一 个 Object。 这 样 就 可 以 通过 $("#sometable").alterBgColor({odd: "odd"， 
even:"even"，selected:"selected"}) 自 定义 奇偶 行 的 样式 类 名 以 及 选中 后 的 样式 类 名 。 同 时 ， 直 接 使 
用 $("#sometable").alterBgColorO 就 可 以 应 用 默认 的 样式 类 名 。 


jQuery 代码 如 下 : 






























































:(function($) { 
$.fn.extend({ 
"alterBgColor" :function(options){ 
options=$.extend({ 
oadeodceee 
even: "even"， /*[00O000*/ 
Selected: "selected” 人 DODDODDx/ 
























































},options); 
J 
js 
}) (jQuery); 
如 果 在 后 面 的 程序 中 需要 使 用 options 对 象 中 的 属性 ， 可 以 使 用 如 下 方式 来 获得 : 
options .odd; or sodden 
options .even; /0D options0000 even0000 
options. selected; //0D optionsDDDD selected0000 

















接 下 来 就 需要 把 这 些 值 放 到 程序 中 ， 来 代 蔡 先 前 程序 中 的 固定 值 。 
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最 后 就 是 匹配 元 素 的 问题 了 。 显 然 不 能 直接 用 $Ctbody>tr) 选 择 表格 行 ,， 这样 会 使 页 面 中 全 部 的 
<tr> 元 素 都 隔行 变色 。 应 该 使 用 选择 器 选中 某 个 表格 ， 执 行 alterBgColor0 方 法 后 ， 将 对 应 的 表格 内 
<tr> 元 素 进行 隔行 变色 。 因 此 ， 需 要 把 所 有 通过 $('tbody> 
表示 在 匹配 的 元 素 内 (当前 表格 内 〉 查找， 并 应 用 上 一 步 中 的 默认 值 。jQuery 代码 如 下 : 









































aune omnes 
$.fn.extend({ 









































tr') 选 择 的 对 象 改 写成 $('tbody>tr'"，this)， 























"alterBgColor":function(options){ 


pad | 

options=$ .extend({ 
odd: "odd", 
even: "even", 


selected: "selected" 


} ,options ) ; 





$("tbody>tr:odd",this).addClass(options.odd); 
$("tbody>tr:even",this).addClass(options.even); 
$('tbody>tr' ,this).click(function() { 


/00000000 


var hasSelected=$ (this).hasClass(options. selected): 
/00000000 selected0000000 selected0 
$(this)[hasSelected?"removeClass":"addClass"](options. selected) 


加 加 本 加 加 四 Kox 
.find(' :checkbox' ) .attr( checked' ,1!hasSelected) ; 


局 











廊 轩 加 加 加 加 加 加 加 加 加 
$('tbody>tr:has(:checked)' ,this).addClass(options. selected); 


melev rn ese as 








| 
}) (jQuery); 














在 代码 的 最 后 ， 返 回 this， 让 这 个 插件 


























jQuery 代码 如 下 : 


$("#table2") 
.alterBgColor() 














kt 有 可 链 性 。 





此 时 ， 插 件 就 完成 了 。 现 在 来 测试 这 个 插件 。 构 造 两 个 表格 ，id 分 别 为 tablel 和 table2， 然 后 
使 用 其 中 一 个 <table> 调 用 alterBgColor0 方 法 ， 以 便 查看 扣 












































fel so lo RS 庆 





从 图 7-25 可 以 看 到 ， 第 1 个 表格 没有 变化 ， 
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件 是 否 能 独立 工作 ， 并 且 具 有 可 链 性 。 




















/D000 
/ 000000 
第 2 个 表格 不 仪 阳 行 变色 ， 同 时 表格 头 部 的 <th> 





标签 的 学 体 颜 色 变 为 红色 。 





















































姓名 性 别 暂 广 地 
张 山 男 浙江 宁波 
李 四 雪 浙江 杭州 
v 竺 五 男 湖南 长 沙 
找 六 男 浙江 温州 
Rain 男 浙江 杭州 
v MAXMAN 女 浙江 杭州 
姓名 性 别 暂 住 地 
李 四 康 浙江 杭州 
二 男 湖南 长 社 














找 六 男 浙江 温州 






浙江 杭州 


072 00000000 

















需要 注意 的 是 ,jQuery 的 选择 符 可 能 会 匹配 1 个 或 多 个 元 素 。 因 此 , 在 编写 插件 时 必须 考虑 到 
这 些 情况 。 可 以 在 插件 内 部 调用 each() 方 法 来 遍历 匹配 元 素 ， 然 后 执行 相应 的 方法 ，this 会 依次 引 
用 每 个 DOM 元 素 。 如 下 jQuery 代码 所 示 : 



































:(function($) { 
$.fn.extend({ 
"SomePlugin" :function(options){ 
return this.each(function() { 
于 | 
js 


Ds 
}) (jQuery); 


20000000000 
这 类 插件 是 在 jQuery 命名 空间 内 部 添加 一 个 函数 。 这 类 插件 很 简单 ， 只 是 普通 的 函数 ， 没 有 
特别 需要 注意 的 地 方 。 


例如 新 增 两 个 函数 ， 用 于 去 除 左 侧 和 右 侧 的 空格 。 虽 然 jQuery 已 经 提供 了 jQuery.trim0) 方 法 来 
去 除 两 端 空格 ， 但 在 某 些 情况 下 ， 会 只 希望 去 除 某 一 侧 的 空格 。 


去 除 左 侧 、 碳 侧 的 空格 的 函数 分 别 写成 如 下 jQuery 代码 : 


function ltrim( text ) { aii 
return (text || "").replace( /~\s+/g, "" ); 



















































































} 
function rtrim( text ) { 人 加 
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return (text || "").replace( /\s+$/g, "" ); 
} 


加 (text | "") 部 分 是 用 于 防止 传递 进来 的 text 这 个 字符 串 变 量 处 于 未 定义 之 类 的 特殊 状态 .如 
果 text 是 undefined， 则 返回 字符 囊 ""， 否 则 返回 字符 囊 text。 这 个 处 理 是 为 了 保证 接 下 来 的 字符 串 
替换 方法 replace() 方 法 不 会 出 错 。 

加 ”运用 了 正则 表达 式 替换 首 末 的 空格 。 
函数 写 完 之 后 ， 就 可 以 放 到 jQuery 命名 空间 之 下 。 代 码 很 简单 ， 而 且 可 以 批量 完成 。 


首先 构建 一 个 Object 对 象 ， 把 函数 名 和 函数 都 放 进去 ， 其 中 的 名 / 值 对 分 别 为 函数 名 和 函数 
E 体 ， 代 码 如 下 : 






















































































LH 








{ 
Itrim : function( text ) { 
mew Gexolll Oeplace/ VSM 
a 
rerime funetonn GO cexen 是 | 
return (text || "").replace( /\s+$/g, "" ); 
} 
} 
然后 ， 利 用 jQuery.extend0) 方 法 直接 对 jQuery 对 象 进行 扩展 。 
jQuery 代码 如 下 : 
GE 
$.extend({ 
Weime unebone ex 
neu vexall replace/ SA 
把 
pl net on text ) { 
return (text || "").replace( /\s+$/g, "" ); 
} 
}) 
}) (jQuery); 





现在 ， 把 代码 放 到 HTML 页 面 中 看 看 有 什么 效果 。 代 码 如 下 : 











<textarea id="trimlest" rows="5" cols="20"></textarea> 
<script type="text/javascript"> 
funesion 
$.extend({ 
Terme funct om text 
newuna ex reolace/ Ns 


070 jQuery00000000 


be 
rar ee or text ) { 
return (text || "").replace( /\s+$/g, "" ); 
} 
DD 
}) (jQuery); 
$("#trimTest").vall 
jQuery.trim(" test a NA Ap 
jQuery. 1trim(" test oa Mn 下 
jQuery.rtrim(" test ”) 
DE 
</sempe> 


运行 代码 后 ， 效 果 如 图 7.26 所 示 。 
文本 框 中 第 1 行 的 字符 串 左 右 两 侧 的 空格 都 被 员 除 。 i 
2 行 的 字符 囊 只 有 左 侧 的 空格 被 天 除 。 es 
3 行 的 字符 串 只 有 右 侧 的 空格 被 天 除 。 

到 这 里 ， 第 2 种 类 型 的 插件 就 编写 完了 。 该 插件 只 是 给 jQuery 























Ht 


























0 7-26 0000 
































对 象 加 上 两 个 简单 的 函数 用 于 去 除 左 侧 或 者 右 侧 的 空格 。 




















3 





| 
jQuery 以 其 强大 的 选择 器 车 称 ， 















































但 这 并 不 表示 其 选择 器 已 经 尽善尽美 。 有 时 候 Web 开发 




















希望 有 一 些 更 强大 的 选择 器 。 


的 选择 器 功能 更 加 完善 。 


符 执 行 一 个 函数 ， 
上 且 不 


百 保 留 这 个 元 素 。 这 样 就 可 以 找到 匹配 的 元 素 节 点 。 


延 





























jQuery 提供 了 一 套 方法 让 








用 户 可 以 通过 制作 选择 器 插件 来 使 用 自 定 义 选 择 器 ， 从 而 使 jQuery 


























jQuery 的 选择 符 解 析 器 首先 会 使 用 一 组 正则 表达 式 来 解析 选择 器 , 然后 针对 解析 出 的 每 个 选择 
称 为 选择 器 函数 。 最 后 根据 这 个 选择 器 函数 的 返回 值 为 true 还 是 false 来 决定 




















下 面 是 一 个 选择 器 例子 : 
$("div:gtD 10 ") 


该 选择 器 首先 会 获取 所 有 的 <div> 元 素 ， 然 后 隐 式 所 历 这 些 <div> 元 素 ， 




















并 逐个 将 这 些 <div> 元 


















































素 作 为 参数 ， 连 同 括号 里 的 “1” 等 一 些 参数 〈 
判断 。 如 果 这 个 函数 返回 tue， 则 这 个 <div> 元 素 











\ 体 见 下文 ) 一 起 传递 给 gt 对 























EE 二 
口 "o 





应 的 选择 器 函数 进行 





呆 留 ， 如 果 返 回 false， 则 不 保留 这 个 <div> 元 素 。 这 
样 得 到 的 结果 就 是 一 个 符合 要 求 的 <div> 元 素 的 集 
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000 jQuery00 2 


:gt() 选 择 器 在 jQuery 源 文件 中 的 代码 如 下 : 





gt: function(a,i,m){ 
return i>m[3]-0: 


} 
其 中 ， 选 择 器 的 函数 一 共 接受 3 个 参数 ， 代 码 如 下 : 


nunetonman em 
WW 
} 


第 1 个 参数 为 a， 指 问 的 是 当前 裔 历 到 的 DOM 元素。 
第 2 个 参数 为 1， 指 的 是 当前 遍历 到 的 DOM 元 素 的 索引 值 ， 从 0 开始 。 





















































的 )， 是 一 个 数组 。 


第 3 个 参数 m 最 为 特别 ， 它 是 由 jQuery 正则 解析 引擎 进一步 解析 后 的 产物 〈 用 match 匹配 出 来 
是 


加 ”ml[0]， 以 上 面 的 $C"div:gt (1) ") 这 个 例子 来 讲 ， 是 :gt (1 ) 这 部 分 。 它 是 jQuery 选择 器 进 


步 将 要 匹配 的 内 容 。 


m[1]， 这 里 是 选择 器 的 引导 符 ， 匹 配 例 子 中 的 “:”， 即 冒号 。 并 非 只 能 使 用 " :" 后 面 跟 


上 选择 器 ， 用 户 还 可 以 自 定义 其 他 的 选择 器 引导 符 。 
日 ”m[2]， 即 例子 中 的 gt， 确 定 究竟 是 调 用 哪个 选择 器 函 


加 m[3]， 即 例子 中 括号 里 的 数字 “1?， 它 非常 有 用 ， 二 0 
昌 ”ml4]， 上 面 的 例子 中 没有 体现 出 来 ， 这 个 比较 罕见 。 例 如 "div :1(ss(dd))" 这 样 一 个 选择 器 
中 ，m[4] 就 指向 了 (dd ) 这 部 分 ， 注 意 是 带 括号 的 (dd )， 而 不 只 是 dd。 同 时 要 注意 ， 此 时 的 m[3] 


的 值 是 ss(dd) 而 非 $s。 


jQuery 已 经 提供 了 1t、gt 和 eq 等 选择 器 ,但 却 没有 提供 le( 小 于 等 于 )、ge( 大 于 等 于 ) 和 betw 
(两 者 之 间 ) 之 类 的 选择 器 。 



































值 为 3、4 元 素 的 功能 
jQuery 代码 如 下 : 























junetaoaan 
Va eenmpa mS A 
return tmp[0]-0<i&&i<tmp[1]-0; // i>2 && i<5 


} 
函数 解释 如 下 。 
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een 


接 下 来 ， 介 绍 如 何 编写 一 个 between 选择 器 。 例 如 使 用 $("div:between(2，5)") 能 获取 索引 


070 jQuery00000000 











第 1 行 , 将 传递 进来 的 m[3] 以 逗号 为 分 隔 符 ， 转 成 一 个 数组 。m[3] 此 时 的 值 应 该 是 “2,5”， 
是 一 个 字符 串 。 随 后 放 入 临时 变量 tmp 中 待 用 。 


第 2 行 ， 直 接 将 得 到 的 2 和 5 与 1 进行 比较 ,i 大 于 2 并 且 小 于 5 的 元 素 都 将 得 以 保留 。 注 意 ， 




























































































接 下 来 ， 将 这 个 函数 扩展 成 jQuery 的 选择 器 。 
jQuery 代码 如 下 : 





:(function($) { 
$.extend($.expr[":"], { 
between : Rmeton on 
var tmp=m[3].split(","); 
return tmp[0]-0<i8&i<tmp[1]-0; 


DE 

}) (jQuery); 

这 里 再 次 利用 jQuery.extend() 方 法 来 对 jQuery 对 象 的 一 部 分 进行 扩展 。 选 择 器 仅仅 是 
jQuery.expr[":"] 对 象 的 一 部 分 ， 同 时 也 是 一 个 Object 对 象 ， 因 此 可 以 直接 利用 jQuery.extend0 对 其 
进行 扩展 。 

最 后 就 可 以 把 选择 器 放 入 页 面 中 来 选取 元 素 了 ， 构 建 如 下 代码 ; 





































































































<script type="text/javascript"> 
J 
TEST 
$.extend( jQuery.expr[":"], { 
between : Roe romeon ne 
Wa S| 
return tmp[0]-0<i&&i<tmp[1]-0; 





和 
Uen 
加 加 
$(function(){ 
$("div:between(2,5)").css("background", "white"):; 
局 
</ASCRIDES 
<div style="background:red">0</div> 
<div style="background:blue">1</div> 
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0U0Ujouery00 200 


<div style="background:green">2</div> 
<div style="background:yellow">3</div> 
<div style="background:gray">4</div> 





<div style="background:orange">5</div> 


图 7-27 和 图 7-28 所 示 的 界面 。 





局 
4l 








[JavaSeript 应 用 椎 序 ] LJavaScript 应 用 程序 ] XI| 
和 全 执行 后 

3 习 

4 

BE 已 本 

















0727 000 0 7-28 000 
在 图 7-28 中 ， 索 引 为 3 和 4 的 行 的 背景 颜色 变 成 了 白色 ， 达 到 了 预期 的 效果 。 
人 至此， 选择 器 插件 编写 完了 。 






































选择 器 插件 中 的 函数 属于 运算 密集 型 函数 , 对 执行 效率 要 求 很 高 ,读者 在 编写 此 类 插件 的 时 候 ， 


























一 定 要 秉承 优化 再 优化 的 原则 ， 千 万 不 要 随便 写 一 个 能 实现 功能 的 函数 就 草草 了 事 。 


B00 
在 本 章 
































中 ， 首 先 介绍 了 几 个 常用 且 功 能 强大 的 jQuery 插件 ， 涵 盖 了 表单 验证 、Ajax 提交 、 














模 态 窗口 、Cookie 和 jQuery UI 中 的 拖 动 排序 。 














下 半 部 分 主要 讲解 了 如 何 自己 动手 编写 jQuery 插件 ， 主 要 有 3 种 类 型 的 插件 ， 包 括 设置 和 获 





























取 字 体 颜 色 的 color 插件 、 表 格 隔行 变色 插件 、 去 邱 左 边 空 格 和 右边 空格 的 ltrim 和 rtrim 插件 以 及 选 





大 家 正在 一 步 步 成 长 ， 从 某 种 意义 上 说 ， 读 者 已 经 可 以 学 成 出 师 了 。 在 第 8 章 将 利用 jQuery 创建 


| 


择 一 定 范 围 索引 值 的 between 选择 器 插件。 通过 对 这 些 插件 例子 的 学 习 ， 读 者 就 可 以 编写 出 属 卫 
己 的 jQuery 插件 了 。 






























































到 这 一 章 为 止 , 对 jQuery 的 讲解 就 结束 了 ， 从 选择 器 、DOM 操作、 事件、 动画 、Ajax 到 插件 ， 
































一 个 完整 的 网 站 ， 作 为 出 师 后 的 一 次 实战 。 











0 80 0 jQuery000000 


在 这 一 草 里 ， 将 从 零 开 始 ， 创 建 一 个 网 站 并 用 jQuery 来 完善 它 。 本 章 不 仅 讲解 了 jQuery 如 何 

















二 














应 用 在 网 站 中 ,还 介绍 了 开发 一 个 网 站 时 ， 前 端 开 发 工作 者 的 一 般 工 作 流程 。 其 中 大 量 涉及 HTML 




















和 CSS 等 内 容 。 这 也 是 为 了 提醒 读者 ， 作 为 一 个 出 色 的 前 端 开发 者 ， 对 HTML 和 CSS 的 到 





E 解 同 术 





要 ， 很 多 时 候 甚 至 比 JavaScript 更 重要 。 


Xe 


这 是 一 个 购物 网 站 ， 网 站 的 用 途 是 向 少男 少女 们 提供 时 尚 服 装 ， 首 饰 和 玩具 等 。 既 然 



































lf 重 

















面向 的 客 


户 群 是 年 轻 的 一 代 , 那么 网 站 应 该 给 人 一 种 很 时 尚 的 感觉 。 因 此 ， 需 要 给 网 站 增加 一 些 与 众 不 同 的 





交互 功能 来 吸引 客户 。 


Xe 国有 各 和 上 四 





假设 已 经 准备 好 了 搭建 这 个 网 站 的 基本 素材 ， 例 如 各 种 产品 的 种 类 ， 产 品 的 介绍 性 文字 ， 
































的 网 站 。 
XS 全 和 
8.3.1 DO0O00 








图 片 和 价格 等 信息 。 现 在 的 任务 就 是 把 这 些 素材 合理 利用 ， 创 建 出 一 个 给 人 一 种 舒适 愉悦 感觉 


每 个 网 站 或 多 或 少 都 会 用 到 图 片 、 样 式 表 和 JavaScript 脚本 ， 因 此 在 开始 创建 该 网 站 之 前 ， 需 


要 对 文件 夹 结构 进行 以 下 设计 。 


回 images 文件 夹 用 来 存放 将 要 用 到 的 图 片 。 
加 styles 文件 夹 用 来 存放 CSS 样式 表 。 
加 scripts 文件 夹 用 来 存放 jQuery 脚本 。 




















本 章 示 例 功 能 为 展示 商品 和 针对 商品 的 详细 介绍 , 因此 只 要 做 两 个 页 面 , 即 首页 和 商品 详细 页 




















即 可 。 目 录 结 构 如 图 8-1 所 示 。 








Dimages 
scripts 
styles 
BIndex.html 
| detailhtml 


081 0000 











8.3.2 DO0O00 








购物 网 站 基本 可 以 分 为 下 面 儿 个 部 分 。 


日” 天 部 : 相当 于 网 站 的 品牌 ， 可 用 于 放置 Logo 标志 和 通 往 各 个 页 面 的 链接 等 。 
加 ”内容 : 放置 页 面 的 主体 内 容 。 
日 ”底部 : 放置 页 面 其 他 链接 和 版 权 信 息 等 。 











该 网 站 也 不 例外 。 首 先 把 网 站 的 主体 结构 用 <div> 标 签 表示 出 来 ，<div> 的 id 属性 值 分 别 为 
“header”“content” 和 “footer”，HTML 代码 如 下 : 























<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"” /> 
<title>Jane Shopping</title> 
</head> 
<body> 
<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div> 
</body> 
</html> 




















这 是 一 个 通用 的 模板 ， 网 站 首页 (index.html) 和 产品 详细 页 (detail.html) 都 可 以 使 用 
该 模板 。 有 了 这 个 基本 的 结构 后 ， 接 下 来 的 工作 就 是 把 相关 的 内 容 分 别 插入 到 各 个 页 面 。 






































833. 局 上 加 四 

















现在 已 经 知道 该 网 站 每 个 页 面 的 大 概 结构 ， 再 加 上 网 站 的 原始 素材 ， 接 下 来 就 可 以 着 手 设计 
这 些 页面 了 。 选 用 Photoshop 图 形 设计 工具 来 完成 这 项 工作 ， 两 个 页 面 的 设计 效果 如 图 8-2 和 
图 8-3 所 示 。 































































































页 面 最 终 效 果 确 定 下 来 之 后 ， 就 可 以 进行 网 页 的 CSS 代码 的 设计 了 。 
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回国 国 国 同 周 
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bd hss hs dh hs hs hs ds hh dd hh hhd 


[活动 ] 伊 伴 春 鞋 迎春 大 促 

[活动 ] 千百度 冬 订 新 品 火热 让 利 
[活动 ] COEY 秋 冬 新 品 全 场 2.3 折 起 
[活动 ] 伊 伴 春 鞋 迎春 大 促 

[活动 ] 千百度 冬 谭 新品 火热 让 利 


国有] 怒 骏 到 
MN 
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082 000000 


回国 国 辐 - 


饮 赤 剖 增 攀 条 纹 衬 去 
全 新 狂 吕 高 交 析 衬衫 再 次 提升 品质， 精 选 100% 新 杜 长 媚 棉 扣 读 而 成 ， 干 整 度 好 ,过 











银 少 ; 80.100 寅 名 戏 股 既 贱 交织 ， 带 来 无 与 伦比 的 他 滞 训 受 ; 而 且 面料 反 光 效果 
好 ， 具 有 了 诅 亮 的 光泽 ， 质 喇 上 位 ， 有 利于 旬 寺 效果 的 皇 9 
价格 : 379.00 元 
9 和 促销 : 200.00 元 
砚 。 色 : 吾 白 
女装 ] 
呢 大 胡 他 幅员 出 中 
HR 补 祖 尺寸; 未 地 择 
MY 封 识 "| | ey | ps 
注 率 樟 所 外 突 "i 
男 闭 [0 国 
衬衫 Ts Q 观看 清 疾 图 片 轧 计 : 200 元 
类 克 大 大 让 嬉 商 品评 分 ; 
‘RN 食 食 例会 食 
n CD 
类 得 了 过 
和 Rn | FN 
沿用 风 启 百年 的 经 积 全 棉 牛 于 仿 面 科 ,通过 人 元 9 沪 所要 
页 区 包 天 所 音 技 术 ,使 面料 的 抗 回 性 家 更 上 一 蚌 ， 生 入 入 和 的、 好 适 、 
法 关 寺 息 广 包 嫂 原 设计 理念， 季 批 出 免 绝 ， 易 打 耳 的 所 扣 免 奖 牛 旭 条 长 
让 清仓 我 了 Rs 二 
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人 |] [| [站 将 ] 女 洲 磷 交 


在 开始 编写 CSS 之 前 ， 应 该 把 整个 网 站 的 (X)HTML 代 码 全 部 写 出 来 ， 然 后 把 CYHTML 代 码 放 
到 http://validator.w3.org/ 网 站 上 去 验证 ， 看 是 否 符合 规范 ， 如 果 验 证 成 功 ， 我 们 就 可 以 开始 编写 网 
站 的 CSS 样 式 了 。 下 面 是 (X)HTML 验 证 一 些 常 见 的 错误 : 






































* No DOCTYPE Found! Falling Back to HIML 4.01 Transitional--0DD DOCTYPEOD 

* No Character Encoding Found! Falling back to UTF-8.--00000000 

* end tag for "img" omitted, but OMITTAG NO was specified--0DO00000"/000 

* an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified-- 
加 加 加 加 加 

* element "DIV" undefined---DIVOOO00000000000 divo 

* required attribute "alt" not specified---0 O000 alt000 

* required attribute "type”" not specified---JSO0 CSSO000000 type000 


[DD UD UD 0D “XN 











8.5.1 [0D CSS0O0000DO 























现在 , 不 仪 有 了 一 个 基本 的 XHTML 模板 , 而 且 有 了 设计 好 的 网 站 视觉 效果 。 接 下 来 的 任务 就 
是 让 它 以 网 页 形式 呈现 出 来 。 为 了 达到 目的 ， 需 要 为 模板 编写 CSS 代码 。 我 们 把 所 有 的 CSS 代码 都 
写 在 同一 个 文件 里 ， 这 样 只 需要 在 页 面 的 <head> 标 签 内 部 插入 一 个 <link> 标 签 就 可 以 了 ， 代 码 如 下 : 
















































































<link rel="stylesheet" href="styles/main.css" type="text/css" /> 


8:5;2 0 间 'CSS 











对 于 CSS 的 编写 ， 每 个 人 的 思路 和 写法 都 不 同 。 笔 者 推荐 先 编写 全 局 样式 ， 然 后 编写 可 大 范 
围 内 重用 的 样式 ， 最 后 编写 细节 方面 的 样式 。 这 样 ， 根 据 CSS 的 最 近 优 先 原则 ， 可 以 很 容易 地 对 
网 站 进行 从 整体 到 细节 样式 的 定义 。 


10000000 
首先 编写 reset.css 样式 表 ， 该 样式 表 主 要 用 来 编写 一 些 全 局 的 样式 。CSS 代码 如 下 : 










































































body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, dl ,dt,dd,ul ,ol,|i,pre, form, fieldset, legend,button, input, textar 
ea,th,tdf{fmargin:0;padding:0:;} 

body,button, input, select, textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53.;} 

h1,h2,h3,h4,h5,h6{font-size:100%;} 

address,cite,dfn,em,var{font-style:normal;} 
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code, kbd,pre, samp{font-family:courier new,courier,monospace;} 
small{font-size:12px;} 

ul,ol{list-style:none;} 

a{text-decoration:none;} 
a:hover{text-decoration:underline;} 
sup{vertical-align:text-top;} 
sub{vertical-align:text-bottom;} 

legend{color :#000.;} 

fieldset, img{border:0;} 

button, input, select, textarea{font-size:100%;} 
table{border-collapse:collapse:;border-spacing:0;} 
.clear{clear: both;float: none:height: 0;overflow: hidden:;} 
html .hide{display:none;} 




















(1) 首先 使 用 元 素 标 签 将 每 个 元 素 的 margin 和 padding 属性 都 设置 为 零 。 这 样 做 的 好 处 是 ， 可 
以 让 页 面 不 受到 不 同 浏览 器 默认 设置 的 页 边 距 和 字 边 距 的 影响 。 















































(2) 设置 <body> 元 素 的 字体 颜色 ， 学 号 大 小 等 ， 这 样 可 以 规范 整个 网 站 的 样式 风格 。 


(3) 设置 其 他 元 素 的 特定 样式 。 读 者 可 自行 查阅 CSS 手册 。 
































a 




















注意 : 关于 重 置 样式 ， 读 者 也 可 以 参考 Eric Meyer 的 重 置 样式 和 YUI 的 重 置 样式 。 
























































2000000000 
网 站 的 两 个 页 面 (index.html 和 detailhtml) 都 拥有 头 部 和 商品 推荐 部 分 。 因 此 ， 头 部 和 商品 
推荐 部 分 的 两 个 样式 表 是 可 以 重用 的 。 
































先 我 们 观察 一 下 头 部 的 HTML 结构 ， 代 码 如 下 : 











<div id="header "> 
<div class="contWidth"> 
<a href="#nogo" class="10g0"></a> 
<div class="search"></div> 
<ul id="skin"></ul> 
<div class="mainNav” id="nav"></div> 
</div> 
</div> 


头 部 主要 有 四 块 内 容 ，Logo、 搜 索 框 、 皮 肤 切 换 和 导航 菜单 。 
我 们 先 为 最 外 面 的 元 素 定 义 样式 ，CSS 代码 如 下 : 















































加 eader{ 
background: url("../images/headerbg.png") repeat-x scroll 0 0 #FFFFFF: 
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} 


height: 105px: 


#header .contWidth { 





position: relative; 
height: 105px: 
width: 990px: 
argin: 0 auto 


z-index: 100:; 











上 上面 代码 把 头 部 宽度 定 为 990px， 然 后 用 “margin:0 auto; ”使 其 能 够 居中 显示 。 

















接 下 来 我 们 为 Logo、 搜 索 杠 、 皮 肤 切 换 和 导航 菜单 来 定义 样式 。 


加 Logo 部 分 


Logo 








部 分 的 HTML 代码 如 下 : 


<a class="10go" href="#nogo"> 


<img src="images/10go.gif" alt="Jane Shop"/> 


</a> 


通过 设计 图 ， 我 们 知道 要 将 Logo 放 在 最 左边 ， 即 左 浮动 ，CSS 代码 如 下 : 


#header .logo { 


float:left; 
margin:0 0 0 10px; 
color:#FFF: 
line-height :80px; 
} 
昌 ”搜索 框 


搜索 部 分 的 HTML 代码 如 下 : 


<div class="search"> 


< 


input type="text” id="inputSearch” class="””value=" 中 加 上 0 日 "” 旋 
</div>> 











在 前 




















面 定义 头 部 样式 ， 我 们 为 "#header .contWidth" 定 义 了 "position: relative"， 那 么 在 它 昌 





























元 素 ， 我 1 




















门 可 以 使 用 "position: absolute" 来 将 它 定 义 在 头 部 的 任何 部 分 ，CSS 代码 如 下 : 


#header .search { 
ene nl 
Bop 0 
position: absolute; 


的 
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昌 ”皮肤 切换 


和 Logo 部 分 一 样 ， 可 以 采用 float 浮动 方式 使 它 显示 在 规定 的 位 置 ， 不 过 此 时 ,我 们 使 用 的 是 
右 浮动 ，CSS 代码 如 下 : 









































#skin { 
人 oatsright 
margin:10px: 
padding:4px; 
width:120px: 
































} 
接 下 来 需要 为 品 元 素 内 部 的 芋 元 素 添加 样式 ， 使 之 符合 设计 图 的 效果 ， 代 码 如 下 : 
#skin 1i { 

margin-right :4px; 

width:15px; 


meee ls 

overflow:hidden:; 

display:block: 

eurson Tonner 

float: left; 

text-indent: -9999px:; 

background- image:url("../images/theme.gif"); 


| 


在 上 面 的 CSS 代码 中 ， 首 先 用 “foatleft; ”语句 使 上 元 素 横向 排列 ， 然 后 利用 
“text-indent:-9999px;” 语 句 使 文字 显示 到 看 不 到 的 区 域 ， 然 后 给 fi 元素 添加 背景 图 片 。 





















































注意 : 背景 图 片 是 预先 合并 好 的 ， 这 样 能 节省 网 站 的 HTTP 请 求 。 


























ml 


为 了 使 不 同 的 元 素 显示 不 同 的 背景 图 ， 可 以 使 用 background-position 属性 来 定位 背景 图 。 代 





#skin 0 { background-position:0px Opx; } 

#skin 1 { background-position:15px 0px; } 
#skin 2 { background-position:35px 0px; } 
#skin 3 { background-position:55px Opx; } 
#skin 4 { background-position:75px Opx; } 


#skin 5 { background-position:95px 0px: } 

#skin_0.selected { background-position:0px 15px; } 
#skin 1.selected { background-position:15px 15px: } 
#skin 2.selected { background-position:35px 15px; } 
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加 导航 菜单 
和 搜索 框 部 分 一 样 ， 可 以 采用 绝对 定位 方式 使 它 显示 在 规定 的 位 置 ，CSS 代码 如 下 : 


上 面 只 是 为 一 次 菜单 定义 了 样式 ， 由 于 有 的 菜单 有 二 级 菜单 ， 所 以 我 们 还 需要 做 一 些 工作 。 同 
样 ， 我 们 还 是 先 观察 菜单 的 HIML 结构 ， 代 码 如 下 : 





然后 我 们 为 二 级 菜单 定义 如 下 样式 : 





paddimogm dnX oD 
text-align: center: 
width: 76px: 

} 

.jnNav .subitem dd { 
Floatanlerts 
overflow: hidden:; 
padding: 0; 
width: 364px: 

} 


和 之 前 的 原理 类 似 ， 在 二 级 沫 单 中 ， 我 们 还 是 使 用 了 position，float 等 传统 方式 。 


现在 ， 就 可 以 看 出 网 站 头 部 的 效果 ， 如 图 8-4 所 示 。 



































JaneShop 答 入 商品 各 各 回国 国 目 目 目 


首页 品牌 ”去 装 ”男装 鞋 包 配 饰 


084 D000000 
这 里 二 级 荣 单 并 未 显示 出 来 ， 稍 后 编写 脚本 的 时 候 将 解决 该 问题 。 














300000000 
(1) 网 站 首页 (index.html) 主体 布局 


网 站 首页 主体 部 分 HTML 结构 为 : 




















<div id="content"> 
<div class="janeshop"> 
<div id="jnCatalog"></div> 
<div id="jnImageroll"></div> 
<div id="jnNotice"></div> 
<div id="jnBrand"></div> 
</div> 
</div> 


可 以 使 用 float 浮动 方式 来 达到 布局 需求 ，CSS 代码 如 下 : 

















#content { 
clear: left; 
margin: 0 auto; 
position: relative; 
width: 990px: 
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接 下 来 往 主体 结构 里 面 放置 HTML 代码 来 充实 网 页 ， 从 而 达到 前 面 的 设计 图 效果 。 首 先 从 
左边 开始 。 在 前 面 的 设计 图 中 ， 左 侧 有 一 个 模块 ， 即 “商品 分 类 ”。“ 商 品 分 类 ”的 HTML 结 
构 如 下 : 





接 下 来 ， 为 这 个 模块 添加 相应 的 样式 ， 使 之 能 达到 需求 。 在 ”商品 分 类 ”模块 中 ， 有 部 分 商品 是 
热 销 产品 ， 那 么 需要 为 这 些 元 素 添 加 高 亮 (hot) 样式 。CSS 代码 如 下 : 





应 用 样式 后 ， 页 面 呈 现 效果 如 图 8-5 所 示 。 


左 侧 完 成 后 ， 接 下 来 完成 首页 主体 内 容 的 右 侧 部 分 的 布局 。 从 前 面 的 设计 图 中 可 以 知道 ， 右 侧 
部 分 分 为 上 下 两 个 部 分 ,而 上 面部 分 又 分 为 左右 两 个 部 分 。 我 们 先 来 完成 上 面 的 部 分 ,它们 的 HTML 
结构 如 下 : 





JaneShop PE 
首页 品 租 。” 女 疲 。 男 效 和 社 包 本 饮 

其 其 加 甩 

击 克 [DT 

这 基诺 天 

5 ee 

NEPD 厅 步 

女 此 

琵 太 本 他 

Ya Bi 

平湖 tr 

访 才 更 应 外 究 

男装 

HH 1 他 

x 大 奈 丰 

tt 4 全 网 

Ea Pp 和 

竺 亿 孔 饰 

Ea 修行 条 

丰 友 得 起 生 

站 更 总 皇后 但 

毛线 清仓 茂 子 
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到 ss 加 加 加 加 Sar ==2 
<div id="jnImagerol1"> 
<a href="#nogo" id="JS imgWrap"> 
<img src="images/ads/1.jpg” alts=" 口 口 口 口 口 "/> 
ee ] 
<img src="images/ads/5.jpg” alt=" 口 口 口 口 口 口 "> 
</a> 
<div> 
<a href=" 捧 #1"><em>0D D0DDD</em><em 0 0 1190 0 </em></a> 
Ee el a a a ee ] 
<a href="###5" class="last"><em>0| D000DD</em><em>D 0 </em></a> 
</div> 
</div> 
加 加 加 加 Sn = 
= svar > 
<div id="jnNotice"> 
<div id="jnMiaosha"> 
<a href="#nogo" class="JS css3"><img src="images/upload/20120216.jpg" alt="0 0 0 0 "/></a> 
</div> 
<div id="jnNoticeInfo"> 
ne lil No 3 | se 
<ul> 


lane ls voone 


</a></1i> 
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<I<a he We lss= too nie I OFA 2 OE 
QO is 
</Uls 
<prrelass= Clear /> 
</div> 
</div> 


sl== 加 加 加 ial = 

在 “大 屏 广告 ”部 分 ， 我 们 先 为 它 设 置 固定 的 高 度 和 宽度 ， 然 后 使 用 overflow:hidden 来 隐藏 
答 出 的 部 分 , 接 下 来 为 它 添 加 position:relative 属性 ,然后 为 里 面 的 img 元 素 分 别 添加 position:absolute 
属性 。CSS 代码 如 下 : 

































































me 














#jnImageroll { 

Pioate ef 
height: 320px; 
maoaame Onl On 
overflow: hidden:; 
position: relative; 
width: 550px: 

} 

#jnImageroll img { 
position: absolute; 
de Qe 
Bop 

} 


接 下 来 ， 对 “大 屏 广告 ”下 方 的 缩 略图 设置 样式 。 可 以 使 用 position:absolute 和 bottom:0 的 方 
式 让 缩 略图 处 于 最 下 方 ， 然 后 使 用 float:left 的 方式 让 缩 略 图 以 水 平方 式 排列 。 CSS 代码 如 下 : 









































#jnImageroll div { 
bobtom OE 
overflow: hidden; 
position: absolute; 
Foallerfts 


#jnImageroll diva { 
background-color: #444444: 
color: #FFFFFF: 

display: inline-block: 
Hloatenlefls 

height: 32px: 

argin-right: 1px:; 








overflow: hidden: 
ad animo sn ls 
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text-align: center ; 
width: 79px; 
} 
#jnImageroll div a:hover { 
text-decoration: none; 


} 


#jnImageroll div a em { 





cursor: pointer; 
ls olay loekes 
height: 16px: 
overflow: hidden:; 


width: 79px; 

} 

#jnImageroll .last { 
Iairanii ne 
width: 80px; 


} 


#jnImageroll a.chos { 
background: url("../images/adindex.gif") no-repeat center 39px #37A7D7: 
COOR EE 


} 
应 用 样式 后 ， 网 页 呈现 图 8-6 所 示 的 效果 。 





JaneShop 输入 商品 名 称 巴 国 回国 回国 


首页 品牌 玄 装 男装 鞋 包 配 施 
= 
SRY 





而 克 阿迪 达 斯 
达 美 妮 李宁 
寡 奥康 

驼 驼 ED 特步 
女装 

呢 大 让 地 

观 晓 衬衫 

羊 绒 衫 针织 

连 衣 语 上 天 外套 
男装 

衬衫 地 六 
夹克 大 皮衣 
风衣 牛 地 裤 
西服 卫衣 

圣 包 配饰 

围巾 旅行 箱 
真皮 包 韩版 
达芙妮 单 启 包 
毛线 清仓 台子 











086 00000000 


264 


“最 新 动态 ”部 分 由 于 也 都 是 一 些 列表 元 素 ， 所 以 布局 可 以 借鉴 之 前 模块 的 样式 设计 ，CSS 代码 如 下 : 





0U0U0jouery00 200 


应 用 样式 后 ， 网 页 呈现 图 8-7 所 示 的 效果 。 









加 
Janeyhop 输入 商品 名 称 中国 国 上 加 目 目 
首页 “品牌 “女装 ”男装 ” 鞋 包 配 饥 
商品 分 类 ce 
推荐 品牌 
而 克 阿迪 达 斯 于 
达 美 妮 。 ”李宁 
雪耻 奥康 
驹 驼 特步 
妇 装 
呢 大 家 他 最 新 动态 
3 了 衬衫 [活动 ] 伊 伴 春 灶 迎 春 大 保 
汗 线 衫 针织 [活动 ] 千百度 冬 苇 新 


[活动 ] COEY 秋 冬 新 .3 折 
[活动 ] 伊 伴 春 娃 迎 春 大 促 


男装 [活动 ] 千百度 冬 计 新 品 火热 让 利 
衬衫 T 地 衫 

夹克 大 皮衣 

风衣 牛仔 裤 

西服 卫衣 

圣 包 配饰 

围巾 旅行 箱 

真皮 包 昔 版 

达 甘 妮 单 启 包 

毛线 清仓 就 子 











087 000000 
在 首页 还 有 最 后 一 块 内 容 ， 那 就 是 “品牌 活动 ”部 分 。 它 的 HTML 代码 如 下 : 











<div id="jnBrand"> 
<div id="jnBrandTab"> 


snes 


<U]> 


人 


i><a title="0 0 " href="#nogo">0 0 </a></1i> 





<1i><a title="0D 0 " href="#no0go">0 0 </a></1i> 
<1i><a title="D 0 " href="#no0go">0 0 </a></1i> 
<1i><a title="Applife" href="#nogo">0 0 </a></1i> 
<ls 
</div> 


<div id="jnBrandContent "> 
<div id="jnBrandList"> 


< 
< > 
<a href="#1" class="JS live"><img alt="D 0 " src="images/upload/20120217. jpg" /></a> 
<span><a href="###1">0 0 </a></span> 
s/s 
Ee fa a a fa I ee ] 
= 
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从 代码 可 知 ，“ 品 牌 活动 ”分 为 “jnBrandTab” 和 “jnBrandContent” 两 部 分 。“jnBrandTab” 是 
品牌 活动 分 类 ， 而 “jnBrandContent” 则 是 品牌 活动 的 内 容 。“jnBrandTab” 部 分 的 CSS 代码 如 下 : 





“jnBrandContent” 的 内 容 比 较 多 , 但 宽度 有 限 ， 所 以 可 以 使 用 overflow:hidden 来 隐藏 多 余 的 部 
分 。 在 后 面 的 内 容 里 ， 我 们 将 通过 脚本 来 显示 多 余 的 部 分 。CSS 代码 如 下 : 





#jnBrandContent 1i span { 


} 


background-color: #EFEFEF: 


bottom: 0; 

color: #666666; 
display: block; 
font-size: 14px: 
height: 24px; 
line-height: 24px:; 
overflow: hidden:; 


position: absolute: 
text-align: center: 


width: 183px: 


#jnBrandContent 1i a f{ 


Color :#666666: 





} 

#jnBrandContent 1i a:hover{ 
color: #008CD7; 
text-decoration: none: 

} 


应 用 样式 后 ， 网 页 呈现 


Jane Shop 





图 8-8 所 示 的 效果 。 


商品 名 称 


080 0iauey000000 


回国 国 回 司 同 








首页 品牌 ”女装 男装 鞋 包 配饰 


真皮 包 项 版 
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000 jQuery0 0 200 


即 可 ， 


(2) 详细 页 (detailhtml) 主体 布局 

















详细 页 的 头 部 和 左 侧 相 


根据 前 面 设计 
一 个 选项 卡 。 右 多 


详细 页 主体 布 





<div id="content"> 
<div class="janeshop"> 
<div id="jnC 

<div id="jnPp 

<div id="jnD 





</div> 
</div> 


上 则 是 一 


局 的 HTML 结构 代码 如 下 : 












































些 商 品 信 言 息 介 


atalog"></div> 
roitem"></div> 
etails"></div> 











EF 式 与 首页 (index.html) 一 样 








此 只 需要 修改 内 容 右 侧 即 可 。 


六 




















的 效果 图 可 以 把 右 侧 结构 分 为 左 列 和 右 列 。 在 左 列 有 一 张大 图 片 、 几 张 小 图 片 和 
绍 ， 例 如 颜色 、 尺 寸 和 价格 等 。 

















前 面 我 们 已 经 为 为 商品 分 类 设置 了 样式 ， 接 下 来 只 要 为 “jnProitem” 和 “jnDetails” 设 置 样式 
分 别 为 左右 两 个 模块 设置 float 属性 和 width 属性 ， 从 而 达到 布局 目的 。CSS 代码 如 下 : 


#jnproitem{ 
floatl 


eft: 


width: 312px; 





height: 
display: 
} 
#jnDetails { 
loatel 
display: 


} 


四 产品 大 图 和 产品 缩 略 网 
和 前 面 一 样 ， 使 

















#jnProitem 
border: 
cursor: 
[at 
padding : 


position: 


} 


.Jjqzoon 


560px:; 
































inline: 


eft: 





inline; 
overflow: hidden: 
width: 468px; 




















lpx so 
pointe 
eft; 
0 
rela 


#jnproitem span { 
clear: both: 


] float:left 让 缩 略 





Wrap { 
id #BBBBBB; 
全 





tive 

















图 以 水 平方 式 排 列 。CSS 代码 如 下 : 





加 ”选项 卡 
在 第 5 章 中 ， 我 们 已 经 实现 了 一 个 选项 卡 ， 所 以 需要 将 其 样式 移植 过 来 即 可 ，CSS 代码 如 下 : 
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background:#F1F1F1: 
border:1px solid #898989: 
border-bottom:none: 








】 

.tab .tab menu li .hover { 
background:#DFDFDF: 

} 

.tab .tab menu 1i.selected { 
color:#FFF: 
background:#6D84B4: 

} 

.tab .tab box { 
clear:both; 
border:1px solid #898989:; 

} 


.tab .hide{ 
display:none 


} 
加 颜色， 尺寸 和 评分 


这 些 元 素 的 样式 原理 都 跟前 面 的 差不多 , 在 这 里 就 不 再 做 过 多 的 阐述 了 , 读者 可 以 在 源 代 码 中 
查看 相关 的 CSS 代码 。 


应 用 样式 后 ， 网 页 呈现 如 图 8-9 所 示 的 效果 。 











Janeyhop 条 入 商品 名 称 TTCEPD 


首页 品牌” 女 蕊 。 男 芝 和 鞋 包 配 久 








免 更 两 支 柳条 铬 衬衣 
全 疡 精品 商 赤 棉 衬 祖 两 次 提升 品质 ， 卫 这 1009% 新 疆 长 鲈 机 识 迁 而 成 ,不 整 度 好 ， 适 
锋 今 ;80.100 丙 党 观 股 缀 瑟 亚 织 ,还 采 无 与 伦比 的 财 适 吾 受 ; 而 且 丁 科 反 光 处 时 
好 ， 具 丰 覃 死 的 光 么 ， 届 夺 上 储 ， 厅 利于 免 活 戏 利 的 扒 拧 ? 
价 格 : 339.66 元 
全 二: 200.00 元 
陋 人 色 : 至 白 
n | 
咽 加 加 
尺寸 ; 坟 沈 舌 
s L SL UL 
小 县 
男 些 [ 国 
入 和 T 人 5 各 计 : 200% 
由 而 大 度 丰 结 两 品 i 分 : 
网 及 网 网 网 
以 家 牛 邮 档 
竺 但 配 记 
图 由 放行 条 
及 友人 包 i 再 仁 术 ， 全 而 时 的 抗 儿 性 脱 更 上 一 盯 ， 廷 有 入 约 、 舒 透 、 
这 美 妮 单 汗 包 嫂 王 设计 区 人 ， 特 大 出 久光 ， 昂 打 志 的 结 妆 多 蚀 牛 伸 护 长 
EM 清 售 堵 子 YEN 











08900000 


此 时 ， 网 站 所 需 的 两 个 页 























给 网 站 添加 一 些 交 互 效果 。 


LS [日 口 口 漆 优 0 吕 


8.6.1 00D0D0 








开始 编写 jQuery 代码 之 前 ， 先 确定 应 该 完成 哪些 功能 。 





在 网 站 首页 (index.html) 上 将 完成 如 下 功能 。 


©O0000000© 





搜索 框 文字 效果 。 

网 页 换 肤 。 

导航 效果 。 

左 侧 商品 分 类 热 销 效果 。 

中 间 大 屏 广 告 效 果 。 

右 侧 最 新 动态 模块 内 容 添 加 超 链 接 提示 。 
右 侧 下 部 品牌 活动 横向 滚动 效果 。 

右 侧 下 部 鼠标 滑 过 产品 列表 效果 。 


在 详细 页 〈detailLhtml) 上 将 完成 如 下 功能 。 


O00000000© 


产品 图 片 放 大 镜 效果 。 
产品 图 片 遮 罩 层 效果 。 

单 击 产 品 小 图 片 切换 大 图 。 
产品 属性 介绍 之 类 的 选项 卡 。 
右 侧 产品 颜色 切换 。 

右 侧 产品 尺寸 切换 。 

右 侧 产品 数量 和 价格 联动 。 
右 侧 给 产品 评分 的 效果 。 

右 侧 放 入 购物 车 。 


接 下 来 就 用 jQuery 逐步 地 完成 这 些 效果 。 


080 0jouey000000 








看 都 已 经 完成 ， 与 之 前 设计 的 效果 








图 一 致 。 接 下 来 将 用 jQuery 脚本 





注意 : 为 了 使 js 文件 代码 更 加 清晰 ， 每 个 页 面 上 引用 了 很 多 js 文件 ， 实 际 开发 过 程 中 ， 可 以 合并 


pe 
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8.6.2 [0D ODindexhtml O00OO 











1000000000inputjs0 

搜索 框 默认 会 有 提示 文字 ， 如 “请 输入 商品 名 称 ” 当 光 标定 位 在 搜索 框 上 时 ， 需 要 将 提示 文 
字 去 掉 ， 当 光标 移 开 时 ， 如 果 用 户 未 填写 任何 内 容 ， 需 要 把 提示 文字 恢复 。 在 第 3 章 已 经 实现 过 类 
似 的 效果 ， 不 过 我 们 还 需要 在 此 基础 上 添加 回 车 提交 的 效果 ，jQuery 代码 如 下 : 




































































$(function(){ 
$("#inputSearch").focus(function(){ 
soehiso addolass foeus 区 局 
if($(this).val() ==this.defaultValue){ 
SENS) Val 
) 

)).blur(function(){ 
$(this).removeClass("focus") 
本 

$(this).val(this.defaultValue); 
} 
)) .keyup(function(e){ 

if(e.which == 19){ 

etc 





吕 





2000000change9kin.jSD 



































该 效果 在 第 5 章 已 经 介绍 过 , 需要 引入 jquery.cookiejjs 插件 ,然后 将 第 5 章 的 切换 皮肤 的 jQuery 
代码 引入 ， 最 后 修改 样式 路 径 即 可 ， 代 码 如 下 : 





$(function(){ 
var $1i =$("#skin 1i"); 
gaelieki ven 
SWiGenSkim nis 





) 
var cookie skin = $.cookie("MyCssSkin") 
if (cookie skin) { 

switchSkin( cookie skin ); 


J 
function switchSkin(skinName){ 
$("#"+skinName).addClass("selected") 
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.Siblings().removeClass("selected"): 
$("#cssfile").attr("href","styles/skin/"+ skinName +".css"): 


A 
$.cookie("MyCssSkin" , skinName , { path: '/', expires: 10 }); 


} 
将 以 上 代码 放 到 一 个 名 为 changeSkin.js 的 文件 里 ， 然 后 在 index.html 页 面 中 引用 ， 代 码 如 下 : 

















<script src="scripts/jquery.cookie.js" type="text/javascript"></script> 

<script src="scripts/changeSkin.js" type="text/javascript"></script> 

引入 后 ， 就 可 以 为 网 站 切换 皮肤 了 。 例 如 把 网 站 皮肤 切换 为 红色 ， 并 且 在 关闭 浏览 器 后 ， 再 次 
开 网 站 时 ， 皮 肤 依旧 是 刚才 所 选择 的 样式 ， 即 红色 ， 如 图 8-10 所 示 。 











| 





打 





Jane Shop |W 和 Re 轩 国 避 时 晤 可 


GR 
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从 ee MN 
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0810000000 


3000000navJjsD 
jQuery 代码 如 下 : 


$(function(){ 
$("#nav 1i").hover(function(){ 
$(this).find(".jnNav").show(): 
} ,function(){ 
$(this). find(".jnNav").hide():; 
je 
}) 
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在 上 面 代码 中 ， 使 用 $("#nav 1 来 选择 id 为 nav 里 面 的 <li> 元 素 ， 然 后 为 它们 添加 hover 事件 。 
在 hover 事件 的 第 1 个 函数 内 ,使 用 $(this).find(".jnNav") 找 到 <li> 元 素 内 部 class 为 “jnNav” 的 元 素 ， 
然后 用 “show0O ”方法 使 二 级 菜单 显示 出 来 。 在 第 2 个 函数 内 ， 用 “hide0” 方 法 使 二 级 菜单 隐藏 
起 来 。 显 示 效 果 如 图 8-11 所 示 。 















































4000000000000addhotjsD 
为 了 完成 这 个 效果 ， 可 以 先 用 Firebug 工具 查看 模块 的 DOM 结构 ， 如 图 8-12 所 示 。 





























首页 “ 品牌 玄 装 男装 鞋 包 配饰 


安 路 | 奥康 | 骆驼 | 特步 


品牌 : ”出 克 | 阿迪 达 斯 | 达芙妮 | 李宁 
李宁 | 特步 


耐克 | 阿迪 达 斯 | 达芙妮 





困 《a class="promoted” href="#nogo”> 





曲牌 : ”而 克 | 阿迪 达 斯 | 达 甘 扎 | 李宁 | 安 路 | 奥康 | 驴 驼 | 特步 | 几 vt 
而 克 | 阿迪 达 斯 | 法 甘 妮 | 李宁 | 特步 La hret=rynogory 达 糯 纪 </ay 

i 

T MAITEESI TEM am 国 <1i> 
D0 811 0000 D0 812 000DoMDOD 





在 结构 中 ， 发现 需 要 添加 热 销 效 果 的 元 素 上 会 包含 一 个 “promoted” 的 类 ,通过 这 个 “钩子 ”， 
我 们 就 能 完成 热 销 效果 了 ，jQuery 代码 如 下 : 



































$(function(){ 
$(".jnCatainfo .promoted").append('<s Class="hot "></S> ') 


用 
此 时 ， 热 销 效果 如 图 8-13 所 示 。 




















5000000000000adjsD 


在 实现 这 个 效果 之 前 ， 先 分 析 下 如 何 来 完成 这 个 效果 。 





















































在 产品 广告 下 方 有 5 个 缩 略 文字 介绍 ， 它 们 分 别 代表 5 张 广 告 图 ， 如 图 8-14 所 示 。 











推荐 品牌 

而 克 阿迪 达 斯 9 

达 美 妮 李宁 

安 路 奥康 

骆驼 GE 特步 

0813 0000 0814 00000 


276 


080 0 jQuery000000 


A 
FB 
2 





当 光 标清 过 文字 1 时 ， 需 要 显示 第 1 张 图 














片 ; 当 光 标 滑 过 文字 2 时 ， 需 要 显示 第 2 张 图 片 ; 依 














































































































此 类 推 。 因 此 ， 如 果 能 正确 获取 到 当前 滑 过 的 文字 的 索引 值 ， 那 么 完成 该 效果 就 非常 简单 了 。 完 成 
这 个 效果 的 大 概 结构 代码 如 下 : 
$(function(){ 
var index = 0; 
$("#jnImageroll div a").mouseover(function(){ 
showImg(index): 
}) .eq(0).mouseover():; 
}) 
在 上 面 代码 中 ， 定 义 了 一 个 showImg0) 函 数 ， 然 后 给 函数 传递 了 一 个 参数 index，index 代表 当 
前 要 显示 图 片 的 索引 。 获 取 当 前 滑 过 的 <a> 元 素 在 所 有 <a> 元 素 中 的 索引 可 以 使 用 jQuery 的 index0) 
方法 来 获取 。 其 中 .eq(0).mouseoverO 部 分 是 用 来 初始 化 的 ， 让 第 1 个 文字 高 亮 并 显示 第 1 个 图 片 。 
你 也 可 以 修改 eq0 方 法 中 的 数字 来 让 页 面 默认 显示 任意 一 个 广告 。 代 码 如 下 : 
var index = 0; 
$("#jnImageroll div a").mouseover(function(){ 


index = $("#jnImageroll div a").index(this): 
showImg(index):; 
}) .eq(0).mouseover(); 


接 下 来 完成 showImg0 〇 0 函数，showImg0 〇 函数 代码 如 下 : 


function showImg(index){ 

var $rollobj = $("#jnImageroll1"): 

var $rolllist = $rollobj.find("div a"): 

var newhref = $rolllist.eq(index).attr("href"); 

$("#]S imgWrap").attr("href",newhref) 
.find("img").eq(index).stop(true,true).fadeIn() 
.Siblings().fadeOut(): 

$rolllist.removeClass("chos").css("opacity","0.7") 































































































seqlindex eaddelass( enos NessQ onacney 0 
} 
在 上 段 代码 中 ， 首 先 用 获取 当前 滑 过 的 链接 的 href 值 ， 然 后 将 值 设置 给 大 图 外 面 的 超 链接 。 接 下 
来 , 我 们 获取 所 有 的 大 图 , 然后 根据 传 入 的 参数 index 来 显示 相应 的 图 片 , 并 且 将 相 邻 的 图 片 隐 藏 起 来 。 





你 可 以 使 用 show0 或 者 hide0 完 成 这 个 效果 ， 但 为 了 让 
和 fadeOutO 的 动画 效果 。 在 使 用 这 些 效果 之 前 ， 使 有 
同时 将 正在 执行 的 动画 

字 添 加 高 亮 样式 ， 同 时 为 





图 片 能 够 更 加 平 
日 stop(true,true) 方 法 将 未 执行 完 

















































































































设置 不 透明 度 。 





™ 

















现在 , 当 光 标 在 广告 下 方 的 文字 上 滑 过 时 , 广告 就 会 有 平滑 过 渡 切 换 的 效果 。 














滑 的 过 渡 ， 我 们 使 用 了 fadeIn0) 











的 动 


画 队列 清空 ， 


跳 转 到 未 状态。 最 后 使 用 addClass("chos"). 和 removeClass ("chos") 来 给 当前 的 文 


但 如 果 不 去 人 磅 它 ， 
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那么 广告 始终 不 会 动 。 因 此 接 下 来 需要 为 广告 添加 自动 执行 效果 。 代 码 如 下 所 示 : 














var adlimer = null 
$('#jnImagerol1').hover(function(){ 
if(adTimer){ 
clearInterval(adTimer) 
} 
} ,function(){ 
adTimer = SetInterval(function(){ 
/A 
,S00 
} 


在 setInterval0 方 法 的 第 1 个 参数 中 ， 需 要 实现 以 下 功能 。 








加 ”调用 showImg (index ) 来 显示 广告 效果 。 
日 ”每 调用 一 次 ,给 index 加 1。 


图 ”如果 index 的 大 小 已 经 等 于 广告 展示 的 总 数量 ， 那 么 把 index 设置 为 0， 让 广告 效果 又 重 


新 开始 。 
根据 以 上 分 析 ， 可 以 写 出 如 下 代码 : 


adTimer = SetInterval(function(){ 
showImg(index) 
index++; 
if(index==len){findex=0;} 
ba OD 

















此 时 ， 广告 还 是 不 会 自动 切换 ， 因 为 我 们 并 没有 在 用 户 进入 页 面 时 ， 触 发 hover 方法 。 前 面 介 
绍 过 ，hover() 方 法 的 含义 是 鼠标 滑 入 滑 出 ， 它 对 应 着 2 个 事件 ， 即 mouseenter 和 mouseleave。 因 此 























可 以 通过 trigger("mouseleave") 函 数 来 触发 hover 事件 的 第 2 个 函数 。 最 终 完 整 的 代码 如 下 : 





$(function(){ 

var $imgrolls = $("#jnImageroll div a"): 

$magnollllsse ss on ac OR 

var len = $imgrolls.length: 

var index = 0; 

var adTimer = null; 

$imgrolls.mouseover(function(){ 
index = $imgrolls.index(this): 
showImg(index): 

}) .eq(0).mouseover(); 

加 

$('#jnImagerol1').hover(function(){ 
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if(adTimer){ 
clearInterval(adTimer) 

} 
} ,function(){ 

adTimer = setIinterval(function( ){ 
ShowImg(index) ; 
index++; 
if(index==len){index=0;} 

SO 

}).trigger("mouseleave" ); 





}) 
训 轩 加 轩 轩辕 轩 加 略 
function showImg(index){ 
var $rollobj = $("#jnImageroll"): 
warmepr os = Hr oo la 
var newhref = $rolllist.eq(index).attr("href"); 
$("#]S imgWrap").attr("href",newhref) 
.find("img").eq(index).stop(true,true).fadeIn() 
.Siblings().fadeOut():; 
$rolllist.removeClass("chos").css("opacity","0.7") 
.eq(index).addClass("chos").css("opacity”,"1"); 
} 


运行 代码 后 ， 当 光标 滑 入 广告 文字 时 ， 会 显示 不 同 的 广告 图 片 ， 当 光标 不 伴 它 时 ， 广 告 也 会 自 
动 滚动 切换 。 
































6eU000D0 UDO0U00U0DI 
该 效果 在 第 3 草 的 最 后 一 个 例子 中 已 经 介绍 过 ， 只 需要 将 相应 的 内 容 引 入 即 可 。 


先 引 入 相应 的 CSS 样式， 代码 如 下 : 



































tooltip.js[0D 












































#tooltip{ 
position:absolute; 
border:1px solid #333: 
background:#f7f5d1: 
padding: 1px;: 
color :#333; 
display:none; 


} 
然后 为 超 链接 元 素 添加 class="tooltip" 和 title 属性 ， 代 人 码 如 下 : 








了 


IST classs too nee > 
有 日 加 加 <</ 
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[ee [ON 


<]i><a href="#" class="tooltip" title="D O0000000000." 








Tl ss es /a 
最 后 引入 jQuery 代码 ， 代 码 如 下 : 














> 























$(function(){ 
var x = 10: 
Var 下 = 二 20 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title: 
this.title = "" 
var tooltip <dnwio toole > his mE eT /Ad /i 
$("body").append(tooltip): VO la] 
HO roonp 
ess 
top -telpagelry oe px 
emt (enageXt 
}) .show("fast"); 如 上 加 交加 加 轩 | 交加 加 加 加 加 
}) .mouseout (function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(): WA 
}) .mousemove(function(e){ 
$("#tooltip") 
ess 
“top te pagelry ee px 
"left": (e.pageX+x) + "px" 
os 
DE 
)) 
运行 代码 后 ， 最 新 动态 模块 内 的 超 链接 元 素 已 经 有 了 自制 的 提示 效果 ， 效 果 如 图 8-15 所 示 。 
最 新 动态 
[活动 ] 主 互 应 入 串口 扫 :到 | 
[活动 活动 ] 伊 伴 者 灶 迎 春 大 促 | 入 
[活动 ] 伊 伴 春 鞋 名 春 大 促 
[活动 ] 千百度 冬 计 新 品 火热 让 利 
0815 0000 
70000000000000000imgslidqe.jsD 
在 第 4 章 的 案例 中 ， 已 经 对 类 似 效果 进行 了 介绍 ， 因 此 并 不 需要 花 太 多 功夫 就 可 以 写 出 如 下 
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$(function(){ 
$("#jnBrandTab 1i a").click(function(){ 
$(this).parent().addClass("chos") 
.Siblings().removeClass("chos"): 
var idx = $("#jnBrandTlab 1i a").index(this): 
showBrandList(idx); 
return false: 
ype eck 
Ds 
廊 轩 加 加 | 上 
function showBrandList(index){ 
var $rollobj = $("#jnBrandList"): 
var rollWidth = $rollobj.find("1i").outerWidth(): 
row ne To 加 倍加 轩 加 轩 回 全国 加 回国 
$rollobj.stop(true, false).animate({ left : -rollWidth*index},1000):; 























当 单 击 品牌 活动 右上 角 的 分 类 链接 时 ， 产 品 就 会 以 横向 深 动 的 方式 显示 相应 内 容 。 























80000000000000I imgHover,jsD 
如 果 还 想 为 产品 列表 添加 光标 滑 过 的 效果 ， 其 效果 如 图 8-16 所 示 。 
































女 驻 。 男 胜 。 重 往 


LNING 





耐克 阿迪达斯 李宁 去 路 
08-16 000000000 


为 了 完成 这 个 效果 ， 可 以 为 产品 列表 中 的 每 个 产品 都 创建 一 个 <span> 元 素 ， 它 们 的 高 度 和 宽 
度 都 与 产品 图 片 相同 ， 然 后 为 它们 设置 定位 方式 、 上 边 距 和 左边 距 ， 使 之 刚好 处 于 图 片上 方 ， 代 
人 码 如 下 : 



































$(function(){ 
$("#jnBrandList 1i").each(function(index){ 
var $img = $(this).find("img"); 
var img w = $img.width(); 
var img h = $img.height():; 
var SpanHtml = '<span style="position:absolute;top:0; left:5px;width:'+img_ w+'px:;height:'+img_h+'px;" 


class="imageMask"></span>'; 
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$(spanHtml) .appendTo(this):; 


by 
}) 
































接 下 来 的 工作 就 是 通过 控制 class 来 达到 显示 光标 滑 过 的 效果 。 首 先 在 CSS 中 添加 一 组 样式 ， 


代码 如 下 : 


.imageOver{ 
background:url(../images/zoom.gif) no-repeat 50% 50%; 
filter:alpha(opacity=60):; 


OOoac eye 


} 





当 光 标 滑 入 class 为 “imageMask” 的 元 素 时 ， 为 它 添 加 imageOver 样式 来 使 产品 图 片 出 现 放大 
镜 效果 ; 当 光 标 滑 出 元 素 时 ， 移 除 imageOver 样式 。 代 码 如 下 : 


$("#jnBrandList").find(".imageMask").1live("hover", function(){ 
$(this).toggleClass("imageOver"): 


此 时 ， 当 光标 滑 入 图 片上 时 ， 就 可 以 出 现 放 大 镜 了 。 
































注意 ， 这 里 使 用 的 是 live(0) 方 法 绑 定 事件 ， 而 不 是 使 用 bind0 方 法 。 由 于 “imageMask” 元 素 是 












































被 页 面 加 载 完 后 动态 创建 的 ， 如 果 用 普通 的 方式 绑 定 事 件 ， 那 么 不 会 生效 。 而 live0 方 法 有 个 特性 
就 是 即使 是 后 面 创建 的 元 素 ， 用 它 绑 定 的 事件 一 直 会 生效 。 

















代码 如 下 : 


另外 ， 也 可 以 使 用 delegate0 方 法 ， 通 过 这 种 事 






































F 委 派 的 方式 ， 也 能 达到 预期 的 效果 ，jQuery 








| 下 














$("#jnBrandList").delegate(".imageMask", "hover"，function(){ 


$(th 
bs 


is).toggleClass("imageOver"): 


至 此 ， 首 页 (index.html)〉 的 交互 功能 就 完成 了 。 


8.6.3 [DOD 





ID0DD 


DDU detail,htmO DODDD 


DOODO0ODO0ODjquery.zoom.js +use jqzoom.js0 























f 先 来 看 一 下 最 终 要 实现 的 效果 ， 如 图 8-17 所 示 。 

















如 果 要 杀 自 动手 实现 这 个 效果 ， 或 许 不 是 件 容易 的 事情 。 不 过 ， 可 以 借助 于 插件 ， 插 件 也 是 


jQuery 的 特色 之 一 。 因 此 可 以 去 























官方 网 站 查找 一 下 ， 看 是 否 有 类 似 的 插件 。 在 本 例 中 ， 使 用 的 是 





\ 





























名 为 jqzoom 的 插件 ， 它 很 适合 此 时 的 需求 。 























QQ 观看 清晰 
L817 000000000 


首先 把 它 引 入 到 网 页 中 ， 代 码 如 下 : 














基 商 页 是 分: 


图 片 
如 窒 食 福 遍 寅 





<script src="scripts/jquery.jqzoom.js" type="text/javascript"></script> 
查看 官方 网 站 的 API 使 用 说 明 ， 可 以 使 用 如 下 代码 调用 jqzoom: 


$(function(){ 
$('.jqzoom').jqzoom({ 
ZoomType: 'standard', 
lens:true, 
preloadImages: false, 
alwaysOn:false, 
zoomWidth: 340, 
zoomHeight: 340, 
xOffset:10, 
yOffset :0， 
Dosntonen on 
后 
Ds 


将 上 面 的 代码 放 入 名 为 use_jqzoom.js 的 文件 里 ， 然 后 引入 。 


接 下 来 在 相应 的 HTML 代码 中 添加 属性 ， 为 <a> 元 素 添加 href 属性 ， 它 的 值 指 向 产品 对 应 的 
放大 图 ， 同 时 为 它 自 定义 的 rel 属性 ， 它 是 小 图 片 切换 为 大 图 片 的 “钩子 ” 后 面 将 会 讲解 它 。 代 
人 码 如 下 : 











<a href="images/pro_img/blue one big. jpg" class="jqzoom" rel="'gall’ title="0D O0000000"> 
<img src="images/pro_img/blue one small.jpg”title=" 上 OOOODOOOO0" alt="000000000" 
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id="bigImg” /> 
</a> 


最 后 不 要 和 态 记 添加 jqzoom 所 提供 的 样式 。 








此 时 ， 运 行 代码 后 ， 产 品 图 片 的 放大 效果 就 显示 出 来 了 。 





20000000000 (query.thickbox.js) 
当 单 击 “ 观 看 清晰 图 片 ”按钮 时 ， 需 要 显示 图 8-18 所 示 的 迟 曙 效果 。 






































同样 ， 在 官方 网 站 也 有 一 款 非 常 适 合 的 插件 ， 名 为 thickbox。 按 照 官方 网 站 的 API 说 明 ， 引 入 
相应 的 jQuery 和 CSS 文件 ， 代 码 如 下 : 








<script src="scripts/jquery.thickbox.js" type="text/javascript" /> 
<link rel="stylesheet" href="styles/thickbox.css" type="text/css" /> 











D818 000000 





然后 为 需要 应 用 该 效果 的 超 链接 元 素 添加 class="thickbox" 和 title 属性 ， 它 的 href 值 代表 着 需 
要 弹出 的 图 片 。 代 码 如 下 : 


<a id="thickImg" href="images/pro_img/blue one big.jpg”class="thickbox”title=" 介 绍 文字 ”> 
<img src="images/look.gif" alt="00000 ”> 






























































此 时 ， 当 单 击 “ 观 看 清晰 图 片 ” 按 钮 时 ， 就 能 出 现 遮 四 层 效果 了 。 


在 上 面 的 两 个 效果 中 ， 并 没有 花 太 多 的 时 间 就 做 出 来 了 ， 可 见 ， 合 理 地 利用 成 熟 的 jQuery 插件 
能 极 大 的 提高 开发 效率 。 
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30000000000000switchimg.js0 


当 单 击 产品 小 图 片 时 ， 上 面 对 应 的 大 图 片 需要 切换 ， 并 且 大 图 片 的 放大 镜 效 果 和 遮 罩 效果 也 必 
须 同 时 切换 。 


先 来 实现 第 一 个 效果 : 单 击 小 图 切换 大 


在 前 面 的 jqzoom 的 例子 中 ， 我 们 自 定 义 了 一 个 rel 属性 ， 它 的 值 是 “gall”， 它 是 小 图 切换 大 
图 的 “钩子 ” HTML 代码 如 下 : 







































































两 
5 















































<]1i class="imgList blue"> 
<a href="javascript:void(0);' rel="{gallery: 'gall', smallimage: "images/pro_img/blue one small. 
jpg ,largeimage: 'images/pro_img/blue one big.jpg'}"> 
<img Src= images/pro_img/blue one.jpg” alt=""/> 
</a> 
SE 


在 上 面 代码 中 , 我 们 为 超 链 接 元 素 定义 了 rel 属性 , 它 的 值 又 定义 了 3 个 属性 , 分别 是 “gallery ”、 
“smallimage” 和 “largeimage”， 作 用 就 是 点 击 小 图 时 ， 首 先 通 过 “gallery” 来 找到 相应 的 元 素 ， 然 
后 为 元 素 设 置 “smallimage” 和 “largeimage”。 


此 时 ， 点 击 小 图 可 以 切换 大 图 ， 但 单 击 “ 观 看 清晰 图 片 ”弹出 的 大 图 并 未 更 新 。 接 下 来 就 来 实 
现 这 个 效果 。 


实现 这 个 效果 并 不 难 , 但 为 了 使 程序 更 加 简单 ， 需 要 为 图 片 使 用 基于 某 种 规则 的 命名 。 例 如 为 
小 图 片 命名 为 “blue_one_small.jpg”， 为 大 图 片 命 名 为 “blue_one_ big.jpg”， 这样 就 可 以 很 容易 地 根 
据 单 击 的 图 片 (blue_one.jpg) 来 获取 相应 的 大 图 片 和 小 图 片 。 代 码 如 下 : 


$(function(){ 
$("#jnproitem ul.imgList 1i a").bind("click",function(){ 
Vel esre = as ee ne le Se 
var i = imgSrc.lastIndex0Of("."): 
var unit = imgSrc.substring(i):; 





































































































































































































一 





























imgSrc = imgSrc.substring(0,1i): 
va imgsrea lio moscEr aa oo ri 
$("#thickImg").attr("href" , imgSrc big); 





Do 
DE 


通过 lastIndexOf0 方 法 ， 获 取 到 图 片 文件 名 中 最 后 一 个 “.” 的 位 置 ， 然 后 在 substring0 方 法 中 
使 用 该 位 置 来 分 割 文件 名 ， 得 到 “blue _ one” 和“.jpg” 两 部 分 ， 最 后 通过 拼接 “_big” 来 得 到 相应 
的 大 图 片 ， 将 它们 赋 给 id 为 “thickImg” 的 元 素 。 


应 用 代码 后 ， 当 单 击 产品 小 图 片 时 ,不 仅 图 片 能 正常 切换 ， 而 且 它 们 所 对 应 的 放大 镜 效 果 和 杜 
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000jauey00 200 



































音 层 效果 都 能 正常 显示 出 当前 显示 的 产品 的 图 片 。 
400000000000000tabJjsD 





























在 第 5 草 中 已 经 做 过 一 个 选项 卡 的 例子 ， 因 此 可 以 把 代码 不 加 修改 而 直接 使 有用， 代码 如 下 : 


$(function(){ 
Var $div_ li =$("div.tab menu ul 1i"); 
EGG GE 的 
$(this).addClass("selected") Va [ss] 
.Siblings().removeClass("selected"); 





2 加 加 过 加 加 加 四 
var index = $div_ li.index(this): 


加 < 





a 


雁 加 加 加 加 加 太 加 加 加 加 加 加 加 
eo cal Bel oo Sal 


CA Tv 
.eq(index).show() WS 


.Siblings().hide(); oA ge 
}) .hover(function(){ 


$(this).addClass("hover") 
fune om 
$(this).removeClass("hover"); 























} 
}) 








50000000000switchColor.js0 























与 单 击 左 侧 产 品 小 图 片 切 换 为 大 图 片 类 似 , 不 过 还 需要 多 做 几 步 , 即 显示 当前 所 选中 的 颜色 和 
显示 相应 产品 列表 。 代 码 如 下 : 








$(function(){ 
$(".color change ul 1i img").click(function(){ 
$(this).addClass( "hover") 
.parent().siblings().find("img").removeClass("hover"); 
waena Snen = pbs yt 
var i = imgSrc.lastIndex0f("."): 
var unit = imgSrc.substring(i); 
imgSrc = imgSrc.substring(0,1i): 
var imgSrc small = imgSrc + "_one small"+ unit; 
var imgSrc big = imgSrc + "_one big"+ unit: 
("#bigImg").attr({"src": imgSrc small }); 
ehiek me Katt noe me 
veal le = und) vole oa lie 
(".color_change strong").text(alt): 
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Var newlmgSrc = imgSrc.replace("images/pro_img/",""); 
$("#jnproitem .imgList 1i").hide(): 
$("#jnproitem .imgList").find(".imgList "+newImgSrc).show(); 
| 
DE 


运行 效果 后 ， 产 品 颜 色 可 以 正常 切换 了 ， 但 发 现 一 个 问题 ， 如 果 不 手动 去 单 击 缩 上 略图， 那么 放 
大 镜 效 果 显 示 的 图 片 还 是 原来 的 图 片 。 解 决 方法 很 简单 ， 只 要 触发 获取 的 元 素 的 单 击 事件 即 可 : 






























































$("#jnproitem .imgList").find(".imgList "+newImgSrc) 
eq nd ea ne 


60000000000sizeAndprice.js0 


在 实现 该 功能 之 前 ， 先 看 一 下 它 的 DOM 结构， 在 Firebug 工具 中 显示 如 图 8-19 所 示 的 效果 。 






































日 《li class="pro_size”> 
span> RR#12288;|E#12288;] 二 : </span> 
《strong> 未 选 抒 </ strongy> 
日 <uly 














<1i> SL</1i> 
1i>LL¢/1i> 
/uly 


/1i> 
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通过 观察 产品 尺寸 的 DOM 结构 ,可 以 非常 清晰 地 知道 元 素 之 间 的 各 种 关系 ,然后 利用 jQuery 
时 大 的 DOM 操作 功能 ， 可 以 写 出 如 下 代码 : 






































Ul 





Ch 


$(function(){ 
gC proaszenln MomerGfunetonm 
$(this).addClass("cur").siblings().removeClass("cur") 
bobmnusy namenes wi slinogs suong 
.text( $(this).text() ): 














这 样 ， 用 户 就 可 以 通过 单 击 尺 寸 来 进行 实时 产品 尺寸 的 选择 
O000000000000 sizeAndprice.js0 


该 功能 非常 简单 ， 只 要 能 正确 获取 单价 和 数量 ,然后 取 它们 的 积 ， 最 后 把 积 赋 值 给 相应 的 元 素 
即 可 。 需 要 注意 的 是 , 为 了 防止 表单 元 素 刷 新 后 依旧 保持 原来 的 值 而 引起 的 价格 没有 联动 问题 ， 震 














o 


























































































































要 在 页 面 刚 加 载 时 ， 为 元 素 绑 定 change 事件 之 后 立即 触发 change 事件 。 代 码 如 下 : 
$(function(){ 


var $span = $(".pro price strong"); 
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var price = $span.text(); 
$("#num sort").change(function(){ 
var num = $(this).val():; 


var amount = num * price; 
$span. text( amount ); 
}) .change(); 








8U0UD0I 
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在 开始 实现 该 效果 之 前 ， 先 看 一 下 静态 的 HTML 效果 ， 如 果 使 























<ul class="rating nostar"> 


< 
< 
< 
< 上 i 
<li 


</Ul> 


那么 会 显示 图 8-20 所 示 的 效果 。 


class="one"><a href="#" title="10 ">1</a></1i> 
ass="two"><a href="#" title="20 ">2</a></1i> 
ass="three"><a href="#" title="30 ">3</a></1i> 
ass="four"><a href="#" title="4[0 ">4</a></1i> 
ass="five"><a href="#" title="5[0 ">5</a></1i> 





C 
Cc 
& 
GS 


























如 果 使 


<]j 








<1i class="two"><a href="#" title="20 ">2</a></1i> 
<1i class="three"><a href="#" title="30 ">3</a></1i> 
<1i class="four"><a href="#" title="4[0 ">4</a></1i> 
<1i class="five"><a href="#" title="5[D ">5</a></1i> 
</Ul> 
人 请 廊 食 请 六 那么 会 显示 图 8-21 所 示 的 效果 。 


0 8-21 O00 nestar0OO0O0O 


平分 效果 了 。 





< 


有 如 下 HTML 代码 : 


<ul class="rating onestar"> 


class="one"><a href="#" title="10 ">1</a></1i> 





























根据 这 个 原理 ， 可 以 写 出 如 下 代码 : 


se 
$("Ul 





ma 
re mney i el ce el uel em) 

var tt ee sens Nat vitle 
aller ee Ne le 

var cl = $(this).parent().attr("class"); 




















此 可 以 看 出 ， 通 过 改变 <ul> 元 素 的 class 


了 如 下 HTML 代码 : 


| 


D8-20 O000 nostar0O000 








性 ， 就 能 实现 





$(this).parent().parent().removeClass().addClass("rating "+cl+"star"):; 





0S 


现 


tl 
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return false: 
局 
)) 


这 样 ， 当 用 户 单 击 不 同 的 五 角 星 图 片 时 ， 就 可 以 动态 的 进行 评分 了 。 
9000OO0OO00000finishjsD 


这 一 步 只 需要 将 用 户 选择 产品 的 名 称 、 尺 寸 、 颜 色 、 数 量 和 总 价 告诉 用 户 ， 以 便 
是 否 选择 正确 ， 代 码 如 下 ; 












































] 户 进行 确认 





Mopar 














$(function(){ 
Var $product = $(".pro detail right"); 
$("#cart a").click(function(){ 
var pro name = $product.find("h4:first").text(); 
var pro_size = $product.find(".pro_size strong").text(): 
var pro color = $(".color change strong").text():; 
var pro num = $product.find("#num sort").val():; 





var pro_price = $product.find(".pro_price span").text(): 
wa walmalo oN 
el oeme 
[I ae 
Es OG OO 
ooo on ei | A 二 
soo (ooo oie a 
alert(dialog): 
Reb nionls eA 


}) 
}) 
当 出 现 图 8-22 所 示 的 效果 时 ， 那 么 网 站 所 需 的 所 有 效果 都 已 经 完成 了 。 











免 奖 高 支 棉 条 售 衬 在 

全 新 桔 品 商 支 矿 社 衫 再 次 可 和 肛 品 厦 ， 档 诗 100 和 % 珊 疆 长 和 
诚 少 : 80-100 商 支 观 腾 经 纬 交织 , 带 来 无 与 化 比 的 千 过 
， 睹 夺 上 侍 ， 有 利于 免 演 效 架 的 锥 3 








| 


0 8-22 alert()0 口 
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如 果 你 觉得 以 alert() 方 式 去 显示 内 容 不 大 合适 的 话 ,那么 可 以 使 用 第 7 章 的 学 习 的 SimpleModal 
插件 来 显示 内 容 。 最 终 购 买 效果 图 如 图 8-23 所 示 























提示 


OU semex. 
您 购买 的 产品 是 ; 免 溪 高 支 棉 条 统 衬 家 ; 尺寸 是 : SL; 颜色 是 : 粉 绿 ; 数量 
是 : 5; 总 价 是 : 1000 元 。 


WE 





0 8-23 SimpleModal 口 口 























现在 , 可 以 放心 地 将 这 个 购物 网 站 交 给 后 台 程 序 员 去 处 理 了 。 该 购物 网 站 已 经 具备 了 一 个 很 时 
尚 的 形象 。 在 制作 网 站 的 过 程 中 使 用 合法 且 语 义 清晰 的 XHTML 文档 来 表示 网 站 的 结构 内 容 , 还 用 
到 一 些 外 部 CSS 样式 表 为 这 个 网 站 实现 了 特色 的 视觉 效果 。 最 后 ， 利 用 jQuery 所 提供 的 强大 功能 
改善 了 网 站 的 行为 和 可 用 性 ， 使 用 户 更 容易 接受 这 个 网 站 。 


x% 上 有 


本 草 将 前 7 草 讲解 的 知识 点 和 效果 进行 整合 ， 读 者 不 仅 可 以 学 到 jQuery 中 的 一 些 理论 ， 还 能 
运用 jQuery 创建 一 个 完整 的 网 站 。 利 用 jQuery 提供 的 方法 和 函数 ， 相 信 读 者 已 经 可 以 编写 出 既 实 
用 又 功能 强大 的 脚本 。 虽 然 本 书 将 大 部 分 的 jQuery 方法 和 函数 都 讲解 了 一 壳 ， 然 而 在 实例 中 应 用 
到 的 只 有 一 部 分 ，jQuery 中 还 有 很 多 方法 和 函数 等 竺 读者 去 更 加 深入 地 研究 和 发 掘 。 
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Web 2.0 带 来 的 丰富 互联 网 技术 让 所 有 人 都 享受 到 了 技术 发 展 和 用 户 体验 进步 的 乐趣 。 作 为 下 


一 代 互 联网 标准 一 一 HTML 5 自然 也 是 备 受 期 竺 和 瞩目 ，HTML 5 已 成 为 互联 网 爱好 者 们 茶余饭后 


的 话题 。 






































那么 HTML 5 到 底 是 什么 ， 它 有 哪些 特性 ， 它 未 来 的 发 展 方向 在 哪里 ? 





已 wsx0 


HTML 5 的 前 身 名 为 Web Applications 1.0。 于 2004 年 被 WHATWG (Web Hypertext Application 
Techonlogy Working Group, Web 超 文 本 应 用 技术 工作 组 ) 提出 ，2007 年 被 W3C 采纳 ， 并 被 转变 为 
HTML 5 规范 的 第 一 个 草案 。HTML 5 已 经 得 到 大 多 数 现代 浏览 器 的 支持 。 


谈 到 Web 设计 ， 我 们 经 常 把 Web 分 为 三 个 层 : 
(1) 结构 层 ;(2〉 表现 层 ; (3) 行为 层 。 
它们 对 应 的 技术 ， 分 别 是 : 

(1) HTML:; (2) CSS; (3) JavaScript. 


随 着 HTML 5 的 到 来 ， 这 三 层 的 内 容 已 经 发 生变 化 。 在 结构 层 中 ，HTML 5 添加 了 新 的 标记 ， 
例如 : <header>，<article> 和 <footer> 等 。HTML 5 还 提供 了 媒体 元 素 ， 例 如 : <audio>，<video> 和 
<canvas> 等 。HTML 5 中 表单 元 素 也 得 到 了 加 强 ， 新 增 了 进度 条 、 滑 动 条 和 颜色 拾取 器 等 ， 同 时 ， 














表单 验 订 











F 方 | 















































用 也 可 以 用 











在 行为 层 方 | 
义 <video> 元 素 ，i 




















浏览 器 内 置 的 验证 。 


而 ，HTML 5 为 每 个 新 的 元 素 规 定 了 新 的 交互 方式 以 及 API。 例如， 我 们 可 以 自 定 
让 其 播放 和 和 暂停 视频 动画 等 。 可 以 使 用 <canvas> 绘 制 各 种 图 形 。 而 在 HTML 5 之 









































前 , 想 要 直接 在 网 页 上 进行 直接 绘图 是 不 能 轻易 完成 的 ， 即 使 是 最 简单 的 儿 何 图 形 也 不 可 以 ， 多数 





交互 只 是 保存 和 点 击 。 
出 图 形 ， 需 要 Flash 这 类 插件 来 帮忙 。 





























在 HIML 5 之 前 , 如 果 希 望 能 够 跟 图 片 进 行 更 多 的 操作 或 者 在 浏览 器 当中 画 











不 仅 是 结构 和 行为 发 生变 化 ， 表 现 层 也 同样 得 到 了 改进 。CSS 3 新 增 了 很 多 模块 ， 比 如 ， 
高 级 选择 器 、 渐 变 、 











圆 角 还 有 动画 等 。 而 在 HTML 5 之 前 ， 这 些 工 作 需 要 编写 脚本 才能 实现 


292 


HTML 5 的 改变 不 仅仅 是 这 些 ， 





以 用 
和 WebSocket 等 。 











HTML 5 还 有 了 


恨 多 令 人 心动 的 特性 和 新 功能 ， 














景 还 是 非常 看 好 的 ， 毕 竞 


洒 8440 文 DB 沽 5 中 





对 于 Web 开发 者 来 说 ，jQuery 是 了 
浏览 器 设计 的 ， 并 没有 特别 为 移动 应 用 
上 的 缺憾 的 一 个 
的 技术 ， 除 了 能 提供 很 多 基础 的 移动 页 面 元 素 











动 设备 应 用 











丰富 Web 应 




















在 浏览 器 的 JavaScript API 方面 
cookie 和 window 之 类 的 APL, 而 新 的 JavaScript API 增加 了 很 多 模块 , 比如 Geolocation, Storage 
































限于 篇 幅 无 法 一 一 举 
用 的 大 势 已 经 掀起 ， 让 我 们 共同 期 待 HIML 5 的 降临 。 





程序 设计 。jQuery Mobile 贝 














新 项 目 。 它 基于 jQuery 框架 并 使 用 







































































的 API， 
发 时 间 。 











以 便于 开发 人 员 在 移动 应 用 

















上 使 用 。 





使 








EE eq xcoe000D 


jQuery Mobile 提供 了 非常 友好 的 UI 组 件 集 和 一 个 强 有 力 的 AJAX 的 导航 系统 ， 以 支持 动画 页 
面 转换 。 它 的 策略 可 以 简单 地 总 结 为 : 创建 一 个 在 常见 智能 手机 /平板 电脑 浏览 
看 的 顶级 JavaScript 库 。 概 括 起 来 ，jQuery Mobile 有 以 下 特性 : 





户 界 | 














(1) 基于 jQuery 构建 
与 jQuery 一 致 的 核心 和 语法 ， 这 样 能 让 学 习 者 倍 感 熟悉， 学 习 曲 线 也 是 最 小 的 。 另 外 ， 














它 采 用 





它 还 使 用 了 jQuery UI 代码 和 模式 。 
(2) 兼容 绝 大 部 分 手机 平台 
































也 做 了 不 少 改进 。 以 前 我 们 可 





HH， 但 我 对 于 HTML 5 的 前 








I 是 














| 该 框架 可 以 节省 大 量 的 JavaScript 代码 开 


E 常 流行 JavaScript 类 库 ， 而 且 一 直 以 来 它 都 是 为 Web 























器 领域 内 能 统一 用 


来 填补 jQuery 在 移 
了 HTML 5 和 CSS 3 这 些 新 
开发 功能 外 ,框架 自身 还 提供 了 很 多 可 供 扩 





Ft 


长 















































jQuery Mobile 以 “Write Less, Do More” 作 为 目标 ， 为 所 有 的 主流 移动 操作 系统 平台 提供 了 高 





度 统一 的 UI 框架 ， 而 不 必 为 每 个 移动 设备 编写 独特 的 应 用 程序 。 它 兼容 iDOS、Android、Blackberry、 


Palm WebOS、Nokia/Symbian、Windows Mobile、bada 和 MeeGo 等 ， 只 


$$ 





设备 就 能 提供 最 基本 的 支持 。 


(3) 轻 量 级 的 库 




































































所 需 的 功能 ， 而 不 需要 修改 应 用 的 结 





构 。 


基于 速度 考虑 ， 整 个 库 非常 轻 量 级 ， 同 时 对 图 片 的 依赖 也 降 到 最 小 。 
C4) 模块 化 结构 
创建 定制 版 本 只 包括 应 


碟 有 此 





解释 标准 HTML 的 


(5) HTML 5 标记 驱动 的 配置 








快速 
(6) 渐进 增强 原则 





jQuery Mobile 完全 采用 渐进 增强 原则 : 通过 























F 发 人 员 的 脚本 能 力 需 求 降 到 最 小 化 。 
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个 全 功能 的 标准 HTML 网 页 和 额外 的 JavaScript 


功能 层 ， 提 供 顶 级 的 在 线 体验 。 这 意味 着 即使 移动 浏览 器 不 文 持 JavaScript， 基 于 jQuery Mobile 的 


移动 应 用 程序 仍 能 正常 的 使 用 ， 而 较 新 的 移动 平台 能 获得 更 优秀 的 用 








(7) 响应 设计 


通过 灵敏 的 技术 设计 和 工具 ， 使 得 相同 的 基础 代码 库 可 以 在 不 同 


(8) 强大 的 Ajax 的 导 











它 使 得 页 面 


(9) 易 用 性 












































工作 。 


十 助 功能 ， 比 如 WALARIA， 以 确保 页 























户 体 验 。 





航 系统 








之 间 跳 转变 得 更 加 流畅 ， 同 时 保持 按钮 ， 书 签 和 地 址 栏 的 简洁 。 


障 医 大 小 中 自动 缩放 。 























(10) 文 持 触摸 和 鼠标 事件 
证 触摸， 鼠标， 光标 用 户 都 能 通过 简单 的 API 来 流畅 使 用 。 





(11) 统一 的 UI 组 件 
在 触摸 





体验 和 主题 化 方 




















(12) 强大 的 主题 化 框架 


主题 编辑 器 (ThemeRoller〉 能 很 容易 地 进行 高 度 个 性 


接 下 来 我 们 将 通过 实例 向 大 家 展示 jQuery Mobile 的 特 
架 是 如 何 帮 助 我 们 在 短 时 间 内 建立 起 一 个 高 质量 
动 设备 平台 最 好 是 iPhone 或 Android 或 是 在 PC 


洒 人 HH 文 - 芒 各 口 口 品 





9.4.1 DOO0OD0 


首先 去 官方 下 载 最 新 

















四 ，jQuery Mobile 加 强 和 统一 了 本 地 控制 。 





化 和 品牌 化 的 











的 移动 应 用 程序 。 当 然 ， 











掉 可 以 在 一 些 屏 幕 阅读 器 或 者 其 他 手持 设备 中 





的 界面 定制 。 





















































的 jQuery Mobile 版 本 。 其 次 





， 建 议 在 页 面 


昌 脑 上 使 用 Google 浏览 器 调试 。 








FP 使 用 HTML 5 标准 




















性 及 好 处 ， 让 大 家 一 起 来 了 解 这 个 新 框 
在 这 里 建议 代码 使 用 的 移 


的 页 
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面 声明 和 标签 ， 因 为 移动 设备 浏览 器 对 HTML 5 标准 的 支持 程度 要 远 远 优 于 PC 设备 ， 因 此 使 
上 简洁 的 HTML 5 标准 可 以 更 加 高 效 地 进行 开发 ， 避 免 了 因为 声明 错误 出 现 的 兼容 性 问题 。 代 
人 码 如 下 : 


<1DOGIMRENHIIMES 
<html> 
<head> 
<title>0 0 </title> 
<meta charset="UTF-8"> 
</head> 
<body> 
</body> 
</html> 



















































































9.42 00 HTMLODO 
































jQuery Mobile 可 以 在 普通 的 html 标签 或 html 5 标签 中 工作 ， 在 结构 化 的 页 面 中 ， 完 整 的 页 四 
结构 分 为 header、content 和 footer 这 三 个 主要 区 域 。 一 个 最 简单 的 jQuery Mobile 代码 如 下 : 





NS 





WO 人 ET 二 
<html> 
<head> 
<t 
<meta name="viewport" content="width=device-width, initial-scale=1"> 


ls 


tle>My Page</title> 


<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" /> 

<script src="js/jquery.js"></script> 

<script src="js/jquery.mobile-1.0.1.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 





<div data-role="header"> 
<hl>My Title</h1l> 
</div> 

<div data-role="content"> 





<p>Hello wor1d</p> 
</div> 
<div data-role="footer"> 
<h4>Footer content</h4> 
</div> 
</div> 
</body> 
</html> 


显 
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et 














在 上 面 代 码 中 ， 我 们 引入 了 3 个 文件 ， 这 也 是 使 用 jQuery 

















Mobile 所 必 备 的 3 个 文件 : Hello world 


加 ”CSS 文件 : jquery.mobile.css 


加 “jQuery 文件 : jquery.js 


加 jQuery Mobile 文件 : jquery.mobile.js 
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:十 二 
壮 忆 : 


1， 默 认 情 况 下 ， 移 动 设 备 的 浏览 器 会 像 在 大 屏幕 的 Web 浏览 器 那样 显示 你 的 页 面 ， 宽 度 达 
到 了 960 像素 ， 然 后 缩小 内 容 以 适应 移动 设备 的 小 屏幕 ， 因 此 用 户 在 移动 设备 看 这 个 页 面 
时 感觉 字体 就 比较 小 了 ， 作 须要 放大 才能 看 得 清楚 。 幸 运 的 是 可 以 使 用 特殊 的 Meta 元 素 可 
视 区 进行 纠正 ， 这 个 元 素 会 通知 浏览 器 使 用 移动 设备 的 宽度 作为 可 视 区 的 宽度 。 对 于 Web 
应 用 程序 ， 一 个 常见 的 设置 是 : 

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 

这 个 元 素 设置 宽度 为 设备 的 最 大 宽度 ， 禁 止 用 户 放大 和 缩小 。 

2， 在 <head> 中 按 顺 序 加 入 框架 的 引用 ， 注 意 加 载 的 顺序 : 


<link rel="stylesheet" href="jquery.mobile.css" /> 
<script src="jquery.js"></script> 
vs 

<script src="jquery.mobile.js"></script> 





9.4.3 data- role[ 0 














在 上 面 的 代码 中 可 以 看 到 页 面 中 的 内 容 都 包装 在 div 标签 中 ,并 在 标签 中 加 入 data-role= "page" 












































属性 。 这 样 jQuery Mobile 就 会 知道 哪些 内 容 需要 处 理 。 把 代码 简化 后 ， 如 下 所 示 : 


<div data-role="page"> 


<div data-role="header">...</div> 
<div data-role="content">...</div> 
<div data-role="footer">...</div> 


</div> 





:十 二 
壮 忌 : 


data- 属 性 是 HTML 5 新 推出 的 很 有 趣 的 一 个 特性 ， 它 可 以 让 开发 人 员 添 加 任意 属性 到 html 
标签 中 ， 只 要 添加 的 属性 名 有 “data-” 前 级 。 
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000 jQueyI0 200 











































































































































































































表 9-1 data-role 属性 
类 型 描 述 示 例 
Button 设置 元 素 为 button 类 型 data-role="button" 
Checkbox 设置 元 素 为 复 选 框 类 型 ， 只 需要 设 轩 type="checkbox”， 个 震 type="checkbox" 
要 data-role 
Collapsible 元 素 为 一 个 包 训 标题 和 内 容 的 容器 data-role="collapsible" 
Collapsible set 元 素 为 一 个 包 于 Collapsible 的 容器 data-role="collapsible-set" 
Content 设置 元 素 为 一 个 内 容 容 器 data-role="content" 
Dialog 设置 元 素 为 一 个 对 话 框 data-rel="dialog" 
Field container 设置 元 素 为 一 个 区 域 包 于 容器 ， 包 含 label/form 的 元 素 对 data-role="fieldcontain" 
Flip toggle switch 设置 元 素 为 一 个 翻转 切换 元 素 data-role="slider" 
Footer 页 面 页 脚 容器 data-role="footer" 
Header 页 面 标题 容器 data-role="header" 
Link 链接 元 素 ， 它 共享 button 的 属性 data-role="button" 
Listview 设置 元 素 为 一 个 列表 视图 data-role="listview" 
Navbar 设置 元 素 为 一 个 导航 栏 data-role="navbar" 
Page 设置 元 素 为 一 个 页 面容 器 data-role="page" 
Radio button 设置 元 素 为 一 个 单 选 枉 ， 不 需要 data-role type="radio" 
Select 设置 元 素 为 一 个 下 拉 框 ， 不 需要 data-role <select> </select> 
Slider 设置 元 素 为 一 个 有 范围 值 的 文本 框 data-role="slider" 
Text input & Textarea 设置 元 素 为 一 个 文本 框 、 数 字 框 、 搜 索 框 等 type='"textlnumber|search| 等 等 " 
9.4.4 DOOD 
如 果 我 们 需要 在 页 面 中 添加 一 个 简单 列表 , 那么 就 可 以 使 用 刚才 所 说 的 data-role 属性 , 将 下 面 


代码 插入 到 


<ul dat 


< 


人 


人 


八 


人 











content 中 : 





a-role="|istvi 
i><a href="#">Acura</a></1i> 
i><a href="#">Audi</a></1i> 
i><a href="#">BMW</a></1i> 

i><a href="#">Cadillac</a></1i> 





</Uul> 


显示 效果 如 





如 果 你 不 喜欢 


i><a href="#">Ferrari</a></1i> 





图 9.2 所 示 : 
宽度 为 100% 的 列表 ， 


EE 





那么 你 可 以 通过 为 元素 设置 

















例如 为 <ul> 





data-inset 属性 。 












































设置 data-inset="true”。 显 示 效 果 如 图 9.3 所 示 。 


My Title 




















Acura [>) 
Audi © 
BMW © 
Cadillac © 
Ferrari © 


Footer content 


092 000000000 
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My Titie 


Acura 
Audl 
BMW 


Cadillac 


© oo0909. 


Ferrari 


Footer content 


09%3 000000000 








jQuery Mobile 自 带 了 一 些 不 错 的 主题 ， 这 些 主题 能 够 快速 的 帮助 开发 人 员 修改 页 面 的 UI。 我 
们 只 需 在 组 件 上 添加 data-theme 属性 即 可 ， 它 的 值 是 a、b、c、d 或 e。 此 外 ，jQuery Mobile 还 提 



























































ThemeRoller 如 图 9.4 所 示 : 








ThemeRoller N e the Pen Kom 
| 
I . Ss 
Theme Settngs 
» Font family [a A @ © B 
» Actve Sate 
» 二 - Sample lex and finks Sample lexl and links 
» kon 
区 5 List Header Ust Header 
© Radio1 © Radio1 
Radio 2 Radio 2 
Checkbox Checkbox 
”区 区 ~ 
Option 1 © Option 1 
Tex Input Text Input 


0 国 0 辕 


D 9.4 Theme RollerDD 


为 列表 添加 data-theme="e" 后 ， 显 示 效 果 如 图 9.5 所 示 : 








<ul data-role="|listview" data-inset="true" data-theme="e"> 
<1i><a href="#">Acura</a></1i> 
<1i><a href="#">Audi</a></1i> 














供 了 一 个 强大 的 ThemeRoller 组 件 (http://jquerymobile.com/themeroller/)， 可 以 让 你 自 定 义 主 题 。 











the ® Adcbe Kuber smatches 
加 加 一 回避 加 加 GJjQvuery 
全 

@ 0 C © 


Sample lext and links 
List Header 
© Radio1 
Radio 2 


Checkbox 


区 到 ~ 
Option1 © 


Text input 


0 
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<1i><a href="#">BMW</a></1i> 
<1i><a href="#">Cadillac</a></1i> 
<1i><a href="#">Ferrari</a></1i> 


< 


x 有 


加 加 加 

















9.5.1 DODOD 
在 移动 框架 方面 ， 除 了 jQuery Mobile 之 外 ， 还 有 很 多 移动 框架 可 选 。 
9 jgMobi (http:/jqmobi.com) 


My Title 





Footer content 


095 000000 








此 jqMobi 不 是 jQuery Mobile， 它 们 两 个 完全 不 同 ，jqMobi 是 基于 jQuery 重 写 的 ， 适 应 于 
iOS 和 Android 等 移动 设备 的 JavaScript 框架 , 它 含 有 jQuery Mobile 的 大 部 分 功能 , 但 是 jqMobi 
体积 更 小 ， 速 度 更 快 ， 兼 容 性 也 有 所 不 同 。 





jqMobi H 


日 三 个 组 伯 














组 成 : 查询 库 、jqUi 和 jqPlugin。 查 询 库 库 提供 了 60 多 个 API 调用 ， 包 括 

















Ajax 调用 、 针 对 webkit 的 系统 选择 器 调用 等 。jqUi 是 一 个 用 户 界面 程序 库 ， 提 供 了 按钮 、 部 件 、 
































寺 Android 2.2 及 更 高 版 本 。jqPlugin 是 用 于 针对 WebKit 浏览 器 交互 和 接口 


回 Sencha Touch (http://sencha.com) 





























的 扣 


固定 的 header/footer 以 及 可 控 的 滚动 部 件 。 该 工具 包 也 仅 针 对 移动 版 本 的 WebKit 浏览 器 ， 同 时 支 





E 件 支持 。 


Sencha Touch 是 专门 为 移动 设备 开发 应 用 的 JavaScript 框架 。 通 过 Sencha Touch 你 可 以 创建 一 


个 非常 像 native app 的 web app, 用 户 界面 组 从 


兼容 Android 


Sencha Touch 是 一 个 重量 级 的 村 
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和 iOS。 





























EE 架 , 组 件 封装 较 多 , 在 各 平台 交互 表现 统 


FE 和 数据 管理 全 部 基于 HTML 5 和 CSS3 的 Web 标准 ， 

















, 但 入 门 门槛 较 高 。 


0 90 jQuery Mobile 


9 Zeptojs (http://zeptojs.com/) 








Zepto.js 是 一 个 专 为 Mobile WebKit 浏览 器 而 开发 的 一 个 JavaScript 框架 。 它 能 够 帮助 开发 人 员 
简单 、 快 速 地 完成 开发 任务 。 更 重要 的 是 这 个 JavaScript 框架 ， 是 超 轻 量 级 的 ， 只 有 5KB。Zepto.js 
的 语法 借鉴 并 兼容 jQuery。 
























































9.5.2 PhoneGap 









































PhoneGap 是 一 个 开源 的 开发 框架 ， 使 用 HTML、CSS 和 JavaScript 来 构建 跨 平 台 的 的 移动 应 
用 程序 。 它 使 开发 者 能 够 利用 iPhone、Android、Palm、Symbian、Blackberry、Windows Phone 和 
Beda 智能 手机 的 核心 功能 理 定位 、 加 速 器 、 联 系 人 、 声 音 和 振动 等 。 同 时 借助 PhoneGap， 
Web 开发 者 还 可 以 把 已 有 的 Web 应 用 打包 成 移动 平台 上 的 本 地 应 用 或 者 应 用 商店 里 的 App， 让 用 
户 直接 下 载 安 装 。 


ee 的 特性 包括 : 将 HTML/JavaScript 代码 打包 成 本 地 App， 帮 助 开发 者 部 团 到 各 种 平 
并 提供 了 访问 移动 应 用 本 地 特性 的 接口 ， 同 时 支持 多 语言 混合 的 插件 机 制 。 


~“ 


本 章 首先 简单 介绍 了 HTML 5,， 然后 重点 介绍 了 jQuery Mobile,， 包括 它 的 特性 和 用 法 。 最 后 对 
其 他 的 移动 框架 进行 了 介绍 。 


移动 互联 网 是 互联 网 的 未 来 。 HTML 5 作为 未 来 移动 终端 的 核心 技术 ， 这 一 点 已 经 成 为 业界 共 
识 ， 各 家 浏览 器 厂商 也 频频 升级 浏览 器 来 更 好 地 支持 HTML 5。 各 大 开发 厂商 的 加 入 ， 也 让 移动 开 
发 领域 的 竞争 变 得 异常 激烈 。 


相信 不 久 的 将 来 ， 不 论 是 桌面 应 用 还 是 移动 应 用 ，HTML 5 都 是 创新 的 主旋律 。 
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洒 84# DOUDDO 


2005 年 8 月 ，John Resig 提议 改进 Prototype 的 “Behaviour” 库 ， 于 是 他 在 blog 上 发 表 了 自己 
的 想法 ， 并 用 了 3 个 例子 做 说 明 。 


第 一 个 例子 是 为 元 素 注册 一 个 事件 : 























Behaviour .register({ 
'#example 1i': function(e){ 
e.onclick = function(){ 
this.parentNode.removeChild(this ) : 





} 
1 


他 认为 应 该 改写 为 : 
$('#example 1i').bind('click',function(){ 


this.parentNode.removeChild(this):; 
js 


第 二 个 例子 是 为 不 同 的 元 素 注册 不 同 的 事件 : 














Behaviour.register({ 
'b.someclass' : function(e){ 
e.onclick = function(){ 
alert(this. innerHTML):; 
} 
} 


someid u' : function(e){ 
e.onmouseover = function(){ 
thnis.innerHTML = "BLAH!"; 
} 
} 
be 


0 100 jQuery0000000 


他 认为 应 该 改写 为 : 


$('b.someclass').bind('click' ,function(){ 
alert(this.innerHTML ) : 

) 

$('#someid u').bind( 'mouseover' ,function(){ 
this.innerHIML = "BLAH!'; 

bs 


第 三 个 例子 是 为 不 断 变 化 的 元 素 注 册 不 同 的 事件 : 














Behaviour.register({ 
pioonolm nue 
a.title = "List Items!": 

a.onclick = function(){ alert('Hello!'); }; 





> 
'#foo ol li.tmp': function(a) { 
da.style.color = "white : 


} 








Loomonm Eno oo ne 
da.style.background = 'red': 
} 
9 


他 认为 应 该 改写 为 : 





OO I) 
se nue lms lens 
.bind('click' ,function(){ alert('Hello!'): }) 
.Select( .tmp') 
.Style('color', 'white') 
,Select( .foo ) 
.style('background', 'red') 























这 些 代 人 码 也 是 jQuery 语法 的 最 初 维 形 。 当 时 John 的 想法 很 简单 : 他 发 现 这 种 语法 相对 现 有 的 
JavaScript 库 更 为 简洁 。 但 他 没 想到 的 是 ， 这 篇 文章 一 经 发 布 就 引起 了 业界 的 广泛 关注 。 于 是 John 
开始 认真 思考 着 这 件 事 情 (编写 语法 更 为 简洁 的 JavaScript 程序 库 )， 直 到 2006 年 1 月 14 日 , John 
正式 宣布 以 jQuery 的 名 称 发 布 自己 的 程序 库 。 随 之 而 来 的 是 jQuery 的 快速 发 展 。 























































































































2006 年 8 月 , jQuery 的 第 一 个 稳定 版 本 ,并 且 已 经 文 持 CSS 选择 符 、 





| 中 











此 件 处 理 和 AJAX 交互 。 





J 





2007 年 7 月 ,jQuery 1.1.3 版 发 布 ， 这 次 小 版 本 的 变化 包含 了 对 jQuery 选择 符 引 擎 执行 速度 的 
显著 提升 。 从 这 个 版 本 开始 ，jQuery 的 性 能 达到 了 Prototype、Mootools 以 及 Dojo 等 同类 JavaScript 
库 的 水 平 。 同 年 9 月 ，jQuery 1.2 版 发 布 ， 它 去 掉 了 对 XPath 选择 符 的 文 持 ， 原 因 是 相对 于 CSS 
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语法 它 已 经 变 得 多 余 了 。 这 一 版 能 够 对 效果 进行 更 为 灵活 的 定制 ， 
也 使 插件 开发 变 得 更 容易 。 同 时 ，jQuery UI 项 目 也 开始 局 动 ， 这 个 新 









































而 





借助 新 增 的 命名 空间 事件 ， 














的 套件 是 作为 曾经 流行 但 已 





过 时 的 Interface 插件 的 蔡 代 项 目 而 发 布 的 。jQuery UI 中 包含 大 量 预 定义 好 的 部 件 (widget)， 以 及 















































一 组 用 于 构建 高 级 元 素 〈 例 如 可 拖 放 、 拖 搜 、 排 序 ) 的 工具 。 














注意 : XPath (XML Path Language，XML 路 径 语言 ) 是 在 XML 文档 中 识别 不 同 元 素 或 者 元 素 值 
的 一 种 语言 ， 与 CSS 在 HTML 文档 中 识别 元 素 的 方式 类 似 。 在 涉及 属性 选择 符 时 ，jQuery 
使 用 了 XPath 中 的 惯例 来 标识 属性 ， 即 将 属性 前 置 一 个 @ 符 号 并 放 在 一 对 方 括号 中 。 例 如 ， 


要 选择 所 有 带 title 属性 的 链接 ， 可 以 使 用 下 面 的 代码 : 


GOT 


但 在 jQuery 1.2 去 掉 对 XPath 选择 符 的 支持 后 ， 这 种 写法 就 不 能 用 了 ， 必 须 使 用 如 下 代码 : 


$("'altitle]') 


在 一 些 老 的 代码 和 插件 中 这 种 问题 比较 常见 。 





2008 年 5 月 jQuery 1.2.6 版 发 布 ， 这 版 主要 是 将 Brandon Aaron 开发 的 流行 的 Dimensions 




















插件 的 功能 移植 到 了 核心 库 中 ， 同 时 也 修改 了 许多 BUG， 而 且 有 不 少 的 性 能 得 到 提高 。 因 此 ， 
如 果 把 你 以 前 的 jQuery 版 本 升级 到 1.2.6， 那 么 你 完全 可 以 从 你 的 代码 中 排除 Dimensions 插件 。 




















注意 : Dimensions 插件 是 一 个 获得 元 素 尺寸 、 定 位 的 插件 。 














在 jQuery 迅速 发 展 的 同时 ， 一 些 大 的 广 商 也 看 中 了 商机 。2009 年 9 月 ， 微 软 和 诺基亚 公司 


正式 宣布 文 持 开 源 的 jQuery 库 ， 男 外 ， 微 软 公司 还 宣称 他 们 将 把 jQuery 作为 Visual Studio 工具 









































集 的 一 部 分 。 他 将 提供 包括 jQuery 的 智能 提示 、 代 码 片段 、 示 例文 档 编 制 等 内 容 在 内 的 功能 。 


微软 和 诺基亚 公司 将 长 期 成 为 jQuery 的 用 户 成 员 ， 其 他 成 员 还 有 Google，Intel，IBM，Intuit 等 


公司 。 





2009 年 1 月 jQuery 1.3 版 发 布 ， 它 使 用 了 全 新 的 选择 符 引 擎 Sizzle， 在 各 个 浏览 器 下 全 面 超 
越 其 他 同类 型 JavaScript 框架 的 查询 速度 ， 程 序 库 的 性 能 也 因此 有 了 极 大 提升 。 这 一 版 本 的 第 2 个 
变化 就 是 提供 live() 方 法 ， 使 用 live() 方 法 可 以 为 当前 及 将 来 增加 的 元 素 绑 定 事件 ， 在 1.3 版 之 前 ， 
如 果 要 为 将 来 增加 的 元 素 绑 定 事 件 ， 需 要 使 用 livequery 插件 ， 而 在 1.3 版 中 ， 可 以 直接 用 liveO 
















































































方法 。 
注意 : Sizzle 是 jQuery 作者 John Resig 新 写 的 DOM 选择 器 引擎 。Sizzle 有 一 个 重要 的 特点 ， 它 是 完全 


独立 于 jQuery 的 ， 如 果 你 不 想 用 jQuery， 可 以 只 用 Sizzle。Sizzle 下 载 地 址 : http://sizzlejs.com/ 











2010 年 1 月 ， 也 是 jQuery 的 四 周年 生日 ，jQuery 1.4 版 发 布 ， 为 了 庆祝 jQuery 四 周岁 生日 ， 
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jQuery 团队 特别 创建 了 jquery14.com 站 点 ， 带 来 了 连续 14 天 的 新 版 本 专题 介绍 。 


























在 1.3 及 更 早 版 本 中 ，jQuery 通过 JavaScript 的 eval 方法 来 解析 json 对 象 。 在 1.4 中 ， 如 果 你 




















用 的 浏览 器 支 持 ， 则 会 使 用 原生 的 JSON.parse 解析 json 对 象 ， 这 样 对 json 对 象 的 书写 验证 则 更 为 
严格 。 比 如 : {foo: "bar"} 的 写法 将 不 会 被 验证 为 合法 的 json 对象， 必须 写成 {"foo":"bar"}。 如 果 你 


的 程序 打算 升级 到 1.4 版 本 ， 那 么 这 一 点 要 尤其 注意 。 






























































dele 
事 人 














2010 年 2 月 ，jQuery 1.4.2 版 发 布 ， 它 新 增 了 有 关 事 件 委托 的 两 个 方法 : delegate0 和 undelegate()。 
gate0 用 于 替代 1.3.2 中 的 live0 方 法 。 这 个 方法 比 live0 来 的 方便 ， 而 且 也 可 以 达到 动态 添加 
的 作用 。 比 如 给 表格 的 每 个 td 绑 定 hover 事件 ， 代 码 如 下 : 


























2 

$("table").delegate("td", "hover", function(){ 
$(this).toggleClass("hover"); 

os 

WAS 

$("table").each(function()t{ 
$("td", this).1ive("hover", function(){ 

$(this).toggleClass("hover"): 

I 

Ds 


2011 年 1 月 ，jQuery 1.5 版 发 布 。 该 版 本 做 了 如 下 修改 : 


外” 重 写 Ajax 模块 





(1) 最 大 的 变化 是 调用 jQuery.ajax (或 jQuery.get，jQuery.post 等 ) 会 返回 jqXHR 的 对 象 ， 


















































为 不 同 浏览 器 内 置 的 XMLHttpRequest 对 象 提供 了 一 致 的 超 集 ， 可 以 完成 以 前 不 可 能 完成 的 任务 ， 
比如 : 中 止 JSONP 请 求 。 





























(2) 提供 了 更 高 级 的 统一 的 API。 
(3) 更 好 的 扩展 性 ， 可 以 方便 地 扩展 Ajax 的 发 送 与 接收 ， 管 理 Ajax 请 求 。 
加 新 增 延 迟 对 象 


开发 人 员 借 此 可 以 使 用 无 法 立即 获得 的 返回 值 (如 异步 Ajax 请 求 的 返回 结果 )， 而 且 第 一 次 能 够 






























































附加 多 个 事件 处 理 器 。 














比如 ， 使 用 新 的 jQuery Ajax API 实现 下 面 的 代码 : 


// 发 出 请 求 ， 并 记 住 jqxhr 对 象 
var jqxhr = $.ajax({ url: "example.php” }) 











.Success(function() { alert("success"); }) 
.error(function() { alert("error"); }) 
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是 此 次 更 新 有 2 个 做 坏 性 的 变更 ， 将 会 影响 到 现 有 打算 升级 到 1.6 的 那些 项 目 。 


seompleveiuneone eler eonoleven 
WA 


pe 
jqxhr.complete(function(){ alert("second complete"); }); 








9 jQuery.sub0 
可 以 方便 地 创建 jQuery 副本 ， 不 影响 原 有 的 jQuery 对 象 ， 避 人 免 jQuery 冲突 。 示 例 代码 如 下 : 








(function(){ 
var sub$ = jQuery .sub() 
sub$.fn.myCustomMethod = function(){ 
return 'just for me': 


sub$(document).ready(function() { 
sub$('body').myCustomMethod() ; // 'just for me 





p(B 

alert( typeof jQuery('body').myCustomMethod ); // undefined 

加 ”内 部 开发 系统 

jQuery 团队 内 部 开发 系统 的 两 点 改变 : 一 是 服务 器 端 用 NodeJS 蔡 换 了 老 的 Java/Rhino 系统 ， 















































使 得 团队 可 以 专注 于 JavaScript 环境 的 新 变化 ;二 是 所 用 的 代码 压缩 优化 程序 从 Google Closure 
Compiler 切换 到 UsglifyJS， 新 工具 的 压缩 效果 非常 令 人 满意 。 
























































2011 年 5 月 ， jQuery 1.6 版 发 布 。 该 版 本 重 写 了 Attribute 模块 和 大 量 的 性 能 改进 。 值 得 注意 的 












































加 变更 1: 更 新 data() 方 法 
在 jQuery1.5 中 ，data0 方 法 可 以 用 来 将 元 素 上 的 数据 属性 转化 为 JSON 形式 的 值 。JQuery 1.6 


























已 经 更 新 了 此 功能 ，data(0) 方 法 获取 的 值 会 以 驼峰 形式 展示 ， 以 配合 W3C HTMLS5 规范 。 比 如 : 











wine 

<span data-max-value="15" data-min-value="5"></span> 

WS 

$('span').data(); //jQuery 1.5.2000{"max-value":15,"min-value":5} 
$('span').data(); //jQuery 1.6 DODOD {"mxValue":15,"minValue":5} 


日 ” 交 更 2: 独立 方法 处 理 DOM 属性 ， 以 区 分 DOM 的 attributes 和 properties 











一 般 情况 下 ，attributes 表示 从 文档 中 获取 DOM 的 状态 信息 ， 而 properties 表示 元 素 的 动态 





状态 信息 。 比 如 : 


//html: 

<input type™"text" value="abc"> 

有 本 

$("input:text").attr('value’) ; //0 0 abc 
$("input:text").prop('value’) ; //0 0 abc 


如 果 用 户 手 动 改 变 文本 框 的 值 为 “abcdef”， 那 么 : 



































$("input:text").attr('value'’) ; //0 0 abc 
$("input:text").prop( ‘value’) ; /OO abcdef 


同样 ， 如 果 网 页 中 的 复 选 框 的 代码 如 下 : 




















<input type="checkbox” checked /> 
那么 结果 也 会 有 所 不 同 : 


SO eneckbo Rater te eneeked A 
$(":checkbox").prop('checked'); //0 0 true 


所 以 在 jQuery 1.6 中 ， 如 果 要 判断 复 选 框 是 否 选 中 ， 需 媚 


$(this).prop("checked") 
//DD $C(this).is(":checked") 
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发 布 ， 它 调整 了 attr0 方 法 ， 使 其 兼容 1.6 之 前 的 做 法 。 比 如 : 


$(":checkbox").attr("checked", true): 

$( option ) attr( Selected ，truey) : 
$("input").attr("readonly", true): 
$("input").attr("disabled", true): 

if( $(":checkbox").attr("checked") ) { /* Do something */ } 


2011 年 11 月，jQuery 1.7 版 发 布 。 该 版 本 做 了 如 下 修改 : 
加 新 的 事件 API: on0 和 off() 


新 的 on0 和 offOAPI 统一 了 jQuery 中 所 有 对 文档 绑 定 事 们 
码 如 下 : 

















$(elements).on( events [, selector] [, data] , handler ): 
$(elements).off( [ events ] [, selector] [, handler] ); 


娃 


由 于 jQuery 1.6 对 attr0 方 法 的 改变 ， 导 致 很 多 使 用 attr0 方 法 的 程序 
语法 才能 使 用 ， 这 个 不 向 前 兼容 的 改变 引起 了 开发 的 强烈 不 满 。 于 是 在 不 


0 100 


jQueryUDD00U000O 








有 件 处 理 程序 中 使 用 : 























Na 








b 现 问题 ， 必 须 修改 为 1.6 的 
上 10 天 的 时 间 里 ，jQuery 1.6.1 





F 的 操作 ， 而 











它们 也 更 加 简短 。 代 





其 中 on0 替 代 了 之 前 版 本 中 的 bind0、delegate0 和 live0; offO 替 代 了 unbind()、undelegate() 和 





die0。 下 面 代码 是 新 旧 API 调用 之 间 对 应 的 例子 : 
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000 jauey00 200 


(ad elnek myandlerm 
(Cay on ee oom laa le 


(rion Sioa sul Va /| 
(orm one swe (Veal 二 0 宫 


(window) .unbind('scroll.myPlugin'); /加 
(window) .off('scroll.myPlugin'); //0 


('.comment').delegate('a.add', 'click', addNew); //0 
('.comment').on('click', 'a.add', addNew); //] 





('.dialog').undelegate('a', 'click.myD1g'); /名 
@eanaloo omni el em el 





(Ce va el nee ie Wag 


(doeunent oneclick a fn/ 
(Cay di eck 





(qoeumenB of ee a /2 加 
昌 ”事件 委托 的 性 能 改进 


随 着 页 面 大 小 和 复杂 度 的 不 断 增长 ， 事件 委 托 变 得 越 。 eeeneyperirmonee em 
来 越 重 要 。 比 如 Backbone, JavaScript MVC 和 Sproutcore 等 

应 用 框架 都 使 用 了 大 量 的 事件 委托 。 考 虑 到 这 一 点 ， 

jQuery 1.7 重 构 了 事件 委派 ， 使 其 更 加 快速 ， 尤 其 是 在 4 

大 多 数 常见 情况 下 。 图 10-1 是 1.6.4 和 1.7 版 本 的 性 能 

比较 ， 最 终 的 事件 委托 和 1.6.4 相 比 ， 节 省 了 大 约 一 半 的 “ 

时 间 : 全 


加 更 好 地 支持 IE 6/7/8 下 的 HTML 5 ，_ 2 LL. |, bl 


Chrome 14 Opera 11.5 


任何 试图 在 三 6/7/8 中 使 用 新 的 类 似 于 <section> 的 加 
HTML 5 标签 ， 毫 无 疑问 都 会 遇 到 由 6/7/8 无 法 解析 这 0101 000000000 
些 标签 ， 甚 至 将 这 些 标签 从 文档 中 移 除 的 问题 。 在 jQuery 1.7 中 ,为 较 旧 下 版 本 中 html0 一 类 的 方 
法 建立 了 对 HTML 5 的 支持 。 这 一 功能 和 以 前 的 innerShiv 相同 ， 但 你 仍然 需要 在 你 的 文档 头 部 加 
入 HTML5Shiv (或 者 Modernizr) 以 使 月 卫 版 本 文 持 HTML 5 标签 。 如 需要 更 多 资料 ， 请 查看 
The Story of the HTMLS Shiv (http://paulirish.conW2011/the-history-of-the-html5-shiv/)。 
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加 ”更 直观 地 切换 动画 
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在 jQuery 的 旧版 本 中 ， 类 似 于 slideToggle0 或 fadeToggle0 的 切换 动画 在 互相 堆放 和 前 一 个 动 
男 被 stop0 终 止 时 无 法 正常 工作 。 在 1.7 版 本 中 这 一 情况 被 修复 ， 动 画 系 统 会 记 住 元 素 的 初始 值 并 
在 一 个 切换 的 动画 被 提前 终止 时 重 置 它们 。 


加 ”异步 模块 定义 (AMD) 




































































jQuery 1.7 文 持 AMD 规范 ， 可 以 和 遵循 AMD 规范 的 脚本 加 载 嚣 协作， 比如 RequireJS 或 者 curljs。 
9 jQuery.Deferred 


jQuery.Deferred 对 象 除 了 提供 新 的 进度 处 理 及 通知 方法 之 外 ， 同 时 也 新 增 一 个 可 用 来 取得 目前 Deferred 
状态 的 state0 方 法 。Deferred 也 通过 jQuery.Callbacks 机 制 来 提供 给 开发 者 一 个 统一 的 事件 处 理 接口 。 







































































9 jQuery.isNumericO 


在 使 用 jQuery 的 过 程 中 ， 有 时 候 需要 知道 一 个 参数 是 数值 或 可 以 被 成 功 的 转换 为 数值 的 情况 。 所 以 
jQuery 开发 并 公开 jQueryisNumeric0 方 法 。 为 它 传递 一 个 任意 类 型 的 参数 ， 它 将 对 应 的 返回 tue 或 false。 












































加 弃 用 和 删除 的 功能 

jQuery 将 开始 弃 用 过 时 的 特性 ， 以 使 代码 库 更 加 精简 ， 同 时 提高 性 能 。 比 如 live0 和 dieO 已 在 1.7 
版 本 中 被 弃 用 ， 这 些 方法 还 将 继续 有 效 ， 但 为 了 兼容 以 后 的 版 本 不 建议 使 用 它们 ， 可 以 使 用 onO)、offO 
和 delegate0) 之 类 的 代替 。 

一 些 非 标准 的 特性 在 1.7 版 本 中 被 彻底 移 除 了 ， 比 如 event.layerX 和 event.layerY， 可 以 使 用 


event.originalEvent.layerX 和 event.originalEvent.layerY 代替 。 


jQuery.isNaNO: 这 一 未 公开 的 实用 函数 已 被 删除 ， 新 的 jQuery.isNumericO 提 供 了 类 似 的 功能 ， 
并 且 可 以 被 更 好 的 支持 。 


jQuery.event.proxy(): 这 一 未 公开 和 过 时 的 方法 已 被 删除 ， 开 发 者 应 使 用 公开 的 jQuery.proxy 
方法 代替 。 

jQuery 所 有 版 本 的 发 行 说 明 可 以 在 官方 站 点 查 到 ， 网 址 为 http://blog.jquery.com/ 和 和 http://jquery. 
org/history/。 


淋 镍 和 品 口 口 口 口 口 口 品 


jQuery 各 版 本 新 增 方法 如 表 10-1 一 表 10-5 所 示 。 






























































































































































表 10-1 jQuery 1.3 新 增 方法 
方法 名 称 说 明 返 回 值 
本 从 元 素 本 身 开始 ， 逐 级 向 上 级 元 素 匹 配 ， 并 返回 最 先 匹配 的 |。 Quest 
祖先 元 素 Poe 
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方法 名 称 说 明 返 回 值 
ee 返回 传 给 jQuery0 的 原始 的 DOM 节点 内 容 ， 如 果 没 有 获得 通 Ee 
过 ， 那 么 上 下 文 将 可 能 是 该 文档 
.die() 从 元 素 中 删除 先前 用 .liveO0 绑 定 的 所 有 事件 jQuery 
JiveO 附加 一 个 事 和 处理 器 到 符合 目前 选择 器 的 所 有 元 素 匹 配 ， 元 素 下 
可 以 是 现在 和 未 来 的 元 素 
jQuery.queue() 显示 在 匹配 的 元 素 上 的 已 经 执行 的 函数 列队 Array 
jQuery.dequeue() 在 匹配 的 元 素 上 执行 队列 中 的 下 一 个 函数 jQuery 
jQuery.fx.off 关闭 页 面 上 所 有 的 动画 Boolean 
jQuery.isArray() 确定 参数 是 否 是 一 个 数组 Boolean 
jQuery.support 一 组 用 于 展示 不 同 浏览 器 各 自 特性 和 bug 的 属性 集合 Object 
event.currentTarget 在 事件 冒 泡 阶段 中 的 当前 DOM 元 素 Element 
REGISUEEGG ba 9 中 是 否 调用 过 event.preventDefault0) 方 法 来 返回 二 NE 
event.isImmediatePropagationStopped() 2 过 event'stopImmediatePropagationO Boolean 
erent i Bonasatdnsioo edd i ee 用 过 event.stopPropagation() 方 法 来 返 Be 
ee 这 个 属性 包含 了 当前 事 件 最 后 触发 的 那个 处 理 函 数 的 返回 值 ， Object 
除非 值 是 undefined 
event.stopImmediatePropagation() 阻止 剩余 的 事件 处 理 函 数 执行 并 且 防 止 事件 冒 泡 到 DOM 树 上 undefined 
表 10-2 jQuery 1.4 新 增 方法 
方法 名 称 说 明 返回 值 
jQuery.error( message ) 接受 一 个 字符 串 ， 并 抛 出 包含 这 个 字符 串 的 异常 jQuery 
.toArray() 返回 jQuery 集合 中 所 有 元 素 Array 
first() 获取 元 素 集合 中 第 一 个 元 素 jQuery 
‘last() 获取 元 素 集合 中 最 后 一 个 元 素 jQuery 
.has( selector ) 保留 包含 特定 后 代 的 元 素 ， 去 掉 那 些 不 含有 指定 后 代 的 元 素 JQuery 
jQuery.contains(container, contained) 一 个 DOM 节点 是 否 包 含 男 一 个 DOM 节点 Boolean 
. 获取 每 个 当前 元 素 之 前 所 有 的 同辈 元 素 ， 直 到 遇 到 选择 器 匹 
PrevUntil( [ selector ] ) 配 的 元 素 为 止 ， 但 不 包括 选择 器 匹配 的 元 素 Js 
next ntilt Fselector]) 获取 每 个 当 用 元 素 之 后 所 有 的 吕 辈 元 素 ， 到 遇 到 选择 器 匹 jQuery 
配 的 元 素 为 止 ， 但 不 包括 选择 器 匹配 的 元 素 
查找 当前 元 素 的 所 有 的 父辈 元 素 ， 直 到 遇 到 选择 器 匹配 的 元 素 
Prenls ntl Lsolector | ) 为 止 ， 但 不 包括 那个 匹配 到 的 元 素 jQuery 
0 将 匹配 元 素 的 父 级 元 素 删除 ， 保留 | 身 (和 兄弟 元 素 ， 如 果 ey 
存在 ) 在 原来 的 位 置 。 和 .wrap() 的 功能 相反 
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0 100 jQueryUOOOO0OD0D 
方法 名 称 说 明 返回 值 
从 DOM 中 去 掉 所 有 [匹配 的 元 素 。.detach() 和 .remove() 一 样 ， 
decache pbelector 除了 .detach0) 保 存 所 有 jQuery 数据 和 被 移 走 的 元 素 相关 联 。 当 jQuery 
| 需要 移 走 一 个 元 素 , 不 久 又 将 该 元 素 插入 DOM 时 ,这 种 方法 
很 有 用 
类 尝 择 器 于 卫 也 附加 一 个 处 理 一 个 或 多 个 事件 ， 现 在 
.delegate( selector, eventType, handler ) 0 Re 处 理 一 个 或 多 个 事件 ,现在 jQuery 
于 而 为 所 有 选择 器 匹配 的 元 素 删除 一 个 处 理 一 个 或 多 个 事件 ， 现 在 jQuery 
对 或 将 来 ， 基 于 一 组 特定 的 根 元 素 
将 一 个 事件 函数 绑 定 到 "focusin" 事 件 。focusin 事件 会 在 元 素 
(或 者 其 内 部 的 任何 元 素 ) 获得 焦点 时 触发 。 这 跟 ons 事件 
.focusin( handler(eventObject) ) 的 显著 区 别 在 于 ， 它 可 以 在 父 元 素 上 检测 子 元素 获 得 焦点 的 情 jQuery 
况 《〈 换 而 言 之 ， 它 支持 事件 冒 泡 ) 
这 个 函数 是 .bind(focusin', handler) 的 快捷 方式 。 
事件 函数 绑 定 到 "focusout" 事 件 。focusout 事件 会 在 元 素 
部 的 任何 元 素 ) 失去 焦点 时 触发 。 这 跟 blur 。 的 
.focusout( handler(eventObject) ) 显著 区 别 在 于 , 它 可 以 在 父 元 素 上 检测 子 元 素 失去 焦点 的 情况 jQuery 
( 换 而 言 之 ， 它 支持 事件 冒 泡 )。 
这 个 方法 是 .bind(focusout', handler) 的 快捷 方式 
event.namespace 当 事 件 被 触发 时 此 属性 包含 指定 的 命名 空间 String 
.delay( duration, [ queueName ] ) 设置 一 个 延 时 来 推迟 执行 队列 中 之 后 的 项 有 jQuery 
jQuery.fx.interval 该 动画 的 频率 〈 以 毫秒 为 单位 ) Number 
当 你 仅仅 想 要 传递 一 个 空 函数 的 时 候 ， 就 用 他 吧 。 这 对 一 些 
Oey oD 插件 很 有 用 ， 当 插件 提供 了 一 个 可 选 的 回调 函数 接口 ， 那 么 Function 
, 如 果 调 用 的 时 候 没有 传递 这 个 回调 函数 ， 就 用 jQuery.noop 
来 代替 执行 
1 接受 一 个 函数 ， 然 后 返回 一 个 新 函数 , 并 且 这 个 新 函数 始终 保 Funetion 
入 : 持 了 特定 的 上 下 文 语 境 
赤 受 一 个 标准 字符 品 ， 并 返回 解析 后 区 . 
jQuery.parseJSON( json ) 接 f 闪 格式 的 JSON 字 并 返回 解析 后 的 Object 
JavaScript 对 象 
.clearQueue( [ queueName ] ) 从 列队 中 移 除 所 有 未 执行 的 项 jQuery 
jQuery.type( obj ) 确定 JavaScript 对 象 的 类 型 String 
jQuery.isEmptyObject( object ) 依 查 对 象 是 否 为 空 〈 不 包含 任何 属性 ) Boolean 
jQuery.isPlainObject( object ) 测试 对 象 是 否 是 纯粹 的 对 象 〈 通 过 "{} "或 者 "new Object" 创 建 的 ) Boolean 
jQuery.isWindow( obj ) 确定 参数 是 否 为 一 个 窗口 (window 对 象 ) Boolean 
jQuery.now() 返回 一 个 数字 代表 当前 时 间 new Date().getTime() Number 
odetogglelduration [easing] | 通过 沾 明 度 动画 来 显示 或 隐 站 区 本 的 元 jQuery 
. 扩展 其 他 的 css 属性 。cssHooks 是 jQuery 用 来 实现 跨 浏览 器 
JQuery.cssHooks CSS 特效 的 手法 Object 
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表 10-3 jQuery 1.5 新 增 方法 
方法 名 称 说 明 返 回 值 
deferred.done( doneCallbacks ) 添加 处 理 程序 被 调用 时 ， 延 迟 对 象 得 到 解决 Deferred 
deferred fail( failCallbacks ) 添加 处 理 程序 被 调用 时 ， 延 迟 对 象 将 被 拒绝 Deferred 
deferred.isRejected() 确定 延迟 对 象 是 否 已 被 拒绝 Boolean 
deferred.isResolved() 确定 延迟 对 象 是 否 已 得 到 解决 Boolean 
ai 返回 延迟 对 象 的 Promise 对 象 ， 用 来 观察 当 某 种 类 型 的 所 有 行动 绑 有 
定 到 集合 ， 排 队 与 和 否 还 是 已 经 完成 。 
deferred.reject( args ) 拒绝 延迟 对 象 ， 并 根据 给 定 的 参数 调用 任何 失败 的 回调 函数 Deferred 
deferred.rejectWith( contexb [ args ] ) | 拒绝 延迟 对 象 ， 并 根据 给 定 的 上 下 文 和 参数 调用 任何 失败 的 回调 函数 Deferred 
deferred.resolve( args ) 解决 延迟 对 象 ， 并 根据 给 定 的 参数 调用 任何 完成 的 回调 函数 Deferred 
deferred.resolveWith( context args ) | 解决 延迟 对 象 ， 并 根据 给 定 的 上 下 文 和 参数 调用 任何 完成 的 回调 函数 Deferred 
人 ebp onemaDaeKS， | 添加 处 理 程序 被 调用 时 ， 延 迟 对 象 得 到 解决 或 者 拒绝 Deferred 
jQuery.hasData( element ) 判断 一 个 元 素 是 否 有 与 之 相关 的 任何 jQuery 数据 Boolean 
jQuery.parseXML( data ) 把 字符 串 转 化 为 xml 文档 XMLDocument 
jQuery.sub() 可 创建 一 个 新 的 jQuery 副本 ， 不 影响 原 有 的 jQuery 对 象 jQuery 
juory whent derorreda 提 供 一 种 方法 来 执行 一 个 或 多 个 对 象 的 回 调 函 数 ， 延 迟 对 象 通常 Promise 
表示 异步 事件 
jQuery.ajaxPrefilter( [dataTypes] ， 
handler(options, originalOptions, 在 请 求 发 送 之 前 ， 绑 定 和 修改 ajax 参数 。 相 当 于 一 个 前 置 过 滤器 undefined 
jqXHR) ) 
表 10-4 jQuery 1.6 新 增 方法 
方法 名 称 说 明 返 回 值 
deferred.always( alwaysCallbacks ) | 当 延 迟 对 象 是 解决 或 拒绝 时 被 调用 添加 处 理 程序 Deferred 
deferred.pipe([ doneFilter ], [failFilter]) | 筛选 器 和 /或 链 Deferreds 的 实用 程序 方法 Promise 
:focus 选择 当前 获取 焦点 的 元 素 jQuery 
jQuery.holdReady( hold ) 暂停 或 恢复 .ready0 事 件 的 执行 Boolean 
brome lve iateel 次 en 0 对 象 用 来 观察 当 某 种 类 型 的 所 有 行动 绑 定 到 集 ee 
合 ， 排 队 与 否 还 是 已 经 完 
-Prop( propertyName ) 获取 在 匹配 的 元 素 集中 的 第 一 个 元 素 的 属性 值 String 
TemoveProp( propertyName, value ) 为 匹配 的 元 素 删除 设置 的 属性 jQuery 
表 10-5 jQuery 1.7 新 增 方法 
方法 名 称 说 明 返回 值 
jQuery.Callbacks( flags ) 一 个 多 用 途 的 回调 列表 对 象 ， 提 供 了 强大 的 的 方式 来 管理 回调 函数 列表 Undefined 
callbacks.add( callbacks ) 回调 列表 中 添加 一 个 回调 或 回调 的 集合 undefined 
callbacks.disable() 禁用 回调 列表 中 的 回调 undefined 










































































































































































































































































0 100 jQuery000000D0 
续 表 
方法 名 称 说 明 返 回 值 

callbacks.emptyO 从 列表 中 删除 所 有 的 回调 undefined 
callbacks.fire( arguments ) 上 给 定 的 参数 调用 所 有 的 回调 undefined 
callbacks.fired() 确定 如 果 回 调 至 少 已 经 调 次 Boolean 
callbacks.fireWith( [context] L args] ) | 访问 给 定 的 上 下 文 和 参数 列表 中 的 所 有 回调 undefined 
callbacks.has( callback ) 确定 是 否 提供 的 回调 列表 Boolean 
callbacks.lock() 锁定 在 其 当前 状态 的 回调 列表 undefined 
callbacks.locked() 确定 是 和 否 已 被 锁定 的 回调 列表 Boolean 
callbacks.remove( callbacks ) 删除 回调 或 回调 回调 列表 的 集合 undefined 
deferred.notify( args ) 调 个 给 定 args 的 延迟 对 象 上 的 进行 中 的 回调 progressCallbacks Deferred 
deferred.notifyWith( context [, args]) | 根据 给 定 的 上 下 文 和 args 的 延迟 对 象 上 回调 progressCallbacks Deferred 
deferred.progress( progressCallbacks ) | 当 延 迟 对 象 生 成 进度 通知 时 ， 添 加 的 处 理 程序 被 调用 Deferred 
deferred.state() 确定 一 个 延迟 对 象 的 当前 状态 String 
event.delegateTarget 当前 jQuery 事件 处 理 程 序 附 加 的 元 素 Element 
jQuery.isNumeric( value ) 确定 参数 是 否 是 一 个 数字 Boolean 
.Off( events [, selector] [, handler] ) 移 除 用 .on0 绑 定 的 事件 处 理 程序 jQuery 
.On( events [, selector] [,data], handler) | 在 选择 元 素 上 绑 定 一 个 或 多 个 事件 的 事件 处 理 函 数 jQuery 


区 0 





























本 章 主要 对 jQuery 的 发 展 历史 和 jQuery 各 个 版 本 新 增 方法 进行 讲解 。jQuery 的 不 断 升级 





完善 的 同时 也 为 开发 者 带 来 不 少 困扰 ， 特 别 是 一 些 方法 的 改变 而 导致 的 不 ; 



































来 说 ， 最 好 的 方式 就 是 掌握 每 个 版 本 jQuery 功能 的 变化 ， 这 正 是 本 章 的 目的 所 在 。 








容 。 所 以 ， 对 于 开发 者 
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D110 jQueryUUUU0UUODO 





jQuery 越 来 越 流 行 了 ， 大 家 可 能 会 发 现 ， 在 浏览 网 站 的 过 程 中 ， 越 来 越 多 的 网 站 开始 使 用 jQuery 
来 构建 以 往 需要 靠 Flash 来 实现 的 超 酷 动态 效果 ， 事 实 上 jQuery 已 经 是 前 端 开 发 中 重要 的 类 库 
之 一 ， 也 成 为 构建 丰富 Web 前 端的 利器 。 但 是 作为 一 个 JavaScript 类 库 ， 很 多 人 并 不 是 很 清楚 如 
何 正确 使 用 jQuery 来 达到 最 佳 的 性 能 ， 如 果 你 觉得 代码 书写 对 于 性 能 的 影响 不 会 那么 巨大 ， 那 么 
我 只 能 告诉 你 ， 当 你 使 用 jQuery 开发 一 个 复杂 的 动画 和 Web 应 用 时 ， 它 有 可 能 成 为 你 性 能 上 的 终 


极 垩 梦 。 


































































































盖 Ne 





在 本 章 中 ， 我们 将 介绍 在 书写 代码 时 ， 应 该 需要 注意 的 几 个 性 能 问题 ， 希 望 对 于 大 家 在 书写 高 
性 能 的 Web 应 用 中 有 所 帮助 。 


E> 淋 4#Q 口 0 


U0000000 juery0 0 

jQuery 每 一 个 新 的 版 本 都 会 较 上 一 版 进行 Bug 修复 和 一 些 优化 ， 同 时 也 会 包含 一 些 创 新 ， 所 
以 建议 使 用 最 新 版 本 的 jQuery 来 提高 性 能 。 不 过 你 需要 注意 的 是 ， 在 更 换 版 本 之 后 ， 不 要 忘记 测 
试 你 的 代码 ， 毕 竟 有 时 候 不 是 完全 向 后 兼容 的 。 

2000000000 

jQuery 提供 给 开发 人 员 非 常 丰富 的 手段 来 使 用 选择 器 定位 DOM 元 素 , 它 是 开发 人 员 最 常 使 用 
的 功能 ,但 是 很 少 有 开发 人 员 会 考虑 使 用 不 同 的 选择 器 来 处 理性 能 问题 。 这 里 我 们 将 介绍 几 种 常用 
的 选择 器 ， 及 其 它们 之 间 的 性 能 差异 。 

© $("#id") 
使 用 id 来 定位 DOM 元 素 无 疑 是 最 佳 提高 性 能 的 方式 ， 因 为 jQuery 底层 将 直接 调用 本 地 方法 
document.getElementById()。 就 悉 JavaScript 的 人 ， 都 了 解 这 个 方法 将 直接 通过 元 素 id 来 返回 对 应 的 
元 素 。 当 然 ， 如 果 这 个 方式 不 能 直接 找到 你 需要 的 元 素 ， 那 么 你 可 以 考虑 调用 find0 方 法 。 代 码 如 下 : 






































































































































$("#content").find("div") 


使 用 以 上 代码 可 以 有 效 的 缩小 你 定位 的 DOM 元 素 。 为 了 提高 性 能 ， 建 议 从 最 近 的 ID 元 素 开 











始 往 下 搜索 。 
9 $3"p"), $("div"), $( 





标签 选择 器 的 性 能 也 是 不 错 的 ， 它 是 性 能 优化 的 第 二 选择 ， 
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"input") 








document.getElementsByTagName() 来 定位 DOM 元 素 。 


9 $(".class") 





jQueryUDDD00U000O 


因为 jQuery 将 直接 调用 本 地 方法 


这 种 方法 较 我 们 来 说 有 些许 复杂 。 对 于 比较 新 的 浏览 器 例如 焉 9， 它 文 持 本 地 方法 document. 
getElementsByClassNameO0， 而 对 于 老 的 浏览 器 ， 例 如 下 8 或 者 更 早 版 本 ， 





方式 来 实现 ， 这 无 疑 对 性 能 产生 较 大 的 影 




















©  $("[attribute=value]") 











对 于 利用 属性 来 定位 DOM 元 素 ， 本 地 JavaScript 方法 中 并 没有 直接 地 实现 ， 大 多 都 是 使 





























只 外 





EB 靠 使 用 DOM 搜索 


犁 。 所 以 建议 大 家 有 选择 性 的 使 用 它 。 

















用 DOM 


搜索 方式 来 达到 效果 ， 很 多 现代 浏览 器 支持 querySelectorAl10 方 法 ,但 是 不 同 浏览 器 间 的 性 能 还 是 























有 区 别 。 总 体 来 说 ， 使 用 这 种 方式 来 定位 DOM 元 素 ， 性 能 并 不 是 非常 得 





























优化 效果 ， 建 议 开发 中 尽量 避免 这 种 对 性 能 有 害 的 方式 。 








@  s$(":hidden") 





和 上 面 利用 属性 来 定位 DOM 站 


























的 方式 类 似 ， 这 种 伪 选 择 器 也 同样 没有 直接 在 本 : 




















法 中 实现 ， 并 且 jQuery 需要 
能 问题 。 所 以 建议 大 家 尽量 不 
然后 再 使 用 该 选择 器 ， 这 样 对 













































































性 能 优化 会 有 帮助 。 代 码 如 下 : 





$("#content").find(":hidden"):; 





$asbu eon ,fle eal 





ated ): 


























以 上 是 使 用 选择 器 的 基本 规则 ,性 能 自 上 而 下 依次 下 降 ， 如 果 大 家 在 7 
循 以 上 这 个 简单 的 优化 性 能 规则 。 当 然 ， 如果 觉 得 不 是 非常 可 信 ， 那 么 我 建议 大 家 使 






































于 发 














FP 使 


E 想 。 所 以 为 了 获得 更 好 的 


地 JavaScript 方 
搜索 每 一 个 元 素来 定位 这 个 选择 器 ， 这 将 对 你 的 应 用 带 来 比较 大 的 性 
要 使 用 。 如 果 你 坚持 使 用 这 种 方式 ， 请 先 使 用 ID 选择 器 定位 父 元 素 ， 


用 选择 器 ,请 遵 





1 jsPerf 来 直观 的 查看 性 能 区 别 ， 地 址 : http://jsperf.com/id-vs-class-vs-tag-selectors/2 























一 个 在 线 工 





注意 : 1. 尽量 使 用 ID 选择 器 。 


2. 尽量 给 选择 器 指定 上 下 文 。 





300000 











$("#traffic light input.on’ 
$("#traffic light input.on’ 














在 书写 jQuery 代码 中 ， 开 发 人 员 经 常 喜 欢 用 如 下 书写 方式 : 











lal el el meee ee ee 
').css("border", "lpx dashed yellow"):; 
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$("#traffic light input.on").css("background-color"，"orange") ; 

$("#traffic light input.on").fadeIn("S1ow"); 

当然 ， 编 程 中 的 跳跃 思维 导致 你 有 可 能 这 样 书写 代码 ， 这 无 可 厚 非 ， 但 是 这 样 导 致 的 结果 是 : 
jQuery 会 在 创建 每 一 个 选择 器 的 过 程 中 ， 查 找 DOM， 创 建 多 个 jQuery 对 象 。 比 较 好 的 书写 方式 如 下 : 













































































var $active light = $("#traffic light input.on"); /DODDOD 
sacwmlvenlante deel er ve on 

$active light.css("border", "lpx dashed yellow"); 

$active light.css("background-color", "orange"): 

$active light.fadeIn("slow"): 


在 本 例 中 ， 如 果 使 用 链 式 方式 将 更 加 简洁 ， 但 是 这 里 只 为 说 明 使 用 缓存 变量 的 重 
Java 开发 中 不 要 随意 的 创建 对 象 一 样 ， 可 以 帮助 你 有 效 的 提高 代码 运行 性 能 。 





























性 ， 这 和 


中 
















































































上 面 代码 可 以 使 用 jQuery 的 链 式 操作 再 加 以 改善 。 如 下 所 示 : 











var $active light = $("#traffic light input.on"):; 
sact ve de ek vmet on 

SU 

"border":"1px dashed yellow", 








"background-color":"orange" 


}) 


.fadeIn("slow"); 


如 果 你 打算 在 其 他 函数 中 使 用 jQuery 对 象 ， 那 么 你 可 以 把 它们 缓存 到 全 局 环境 中 。 如 下 代码 所 示 : 





























癌症 莉莉 大 三 硬 可 三 硬 本 本 有 加 三国 ao 古国 
window. $my = { 

head : $("head"), 

rar ennone ee reranfnieaogn 

traffic button : $("#traffic button") 
J 
function do_something(){ 

小 国生 加 轩 轩 时 面 加 加 

var Script = document .createElement ("script"); 
my.head.append(script): 
加 
my.cool_ results = $("#some ul 1i"): 
ly.other results = $("#some table td"): 
Ww 
ly.other_results.css("border-color", "red"): 
my.traffic light.css("border-color", "green"): 





















































} 
CA 
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记 住 ， 永 远 不 要 让 相同 的 选择 器 在 你 的 代码 上 





400000 DoMDI 
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tH 现 多 次 。 











[a 
EE 














使 用 jQuery 可 以 很 方便 的 添加 ， 删 除 或 者 修改 DOM 节点 ， 但 是 在 一 些 循环 ， 
或 者 $.each0 中 处 理 节 点 时 ， 下 面 有 个 实例 值得 大 家 注意 ， 代 码 如 下 : 















































本 











$mylist = $("#mylist"); // jQuery0 00 





<ul> 口 


for (var i=0, 1=top 100_list.length; i<1; i++){ 





} 





0 


Sm taend I oom se A OE 


例如 for0，whileO) 


以 上 代码 中 ， 我 们 将 每 一 个 新 添加 的 标签 元 素 都 作为 一 个 节点 添加 容器 ID 中， 实际 上 jQuery 


操作 消耗 的 性 能 也 不 低 ， 所 以 更 好 的 方式 是 尽 可 能 的 减少 DOM 操作 ， 这 中 











在 插入 DOM 之 前 全 部 创建 好 ， 修 改 代码 





如 下 : 

















Va to p00 st nS ns 
i 
onevar i Om vopal0onisaleng en ee 

opal < op Omist ml i 





} 
$mylist.html(top 100_11):; 





记得 以 前 有 一 个 同事 也 写 过 类 似 的 代码 ， 代 码 如 下 : 








Tor eu eS ll 
var $myList = $('#myList'); 





} 























50000000 jQuery00 























使 用 jQuery 选择 器 获取 结果 是 一 个 jQuery 对 








定义 了 索引 和 长 度 的 数组 。 在 性 能 方面 ， 
这 样 能 使 你 的 代码 更 快 。 








$.each(array, function (i) { 
array oe 


Ds 
使 用 for 代替 each0 方 法 ， 代 人 码 如 下 : 











HH 


var array = new Array(): 
for (Var i=0; i< array. length; i++) { 


$myList.append('This is list item ' + 1); 


看 出 问题 所 在 了 吧 ， 居 然 把 #mylist 循环 获取 了 100 次 ! 


| 象 。 然 而 ，jQuery 类 库 会 让 你 居 





应 该 将 整个 元 素 字符 中 























觉 你 正在 使 用 一 个 














建议 使 














用 简单 for 或 者 while 循环 来 处 型 


EE， 而 不 是 $.each()， 
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000 jQuery DD 200 


oa 
} 
另外 注意 ， 检 查 长 度 也 是 一 个 检查 jQuery 对 象 是 否 存在 的 方式 ， 下 面 一 段 代 码 通过 length 属 
性 检查 页 面 中 是 否 含有 id 为 “content” 元 素 : 











dl 




















var $content = $('#content'); 

if( $content ){ // D0 true 
// Do something 

b 

if( $content.length ){ // O00000g true 
// Do something 



































B 

6o000D0D 

每 一 个 JavaScript 事件 (例如 : click，mouseover 等 ) 都 会 冒 泡 到 父 级 节点 。 当 我 们 需要 给 多 
个 元 素 调 用 同 个 函数 时 这 点 会 很 有 用 。 比 如 , 我 们 要 为 一 个 表格 绑 定 这 样 的 行为 : 点 击 td 后 ,把 背 











景色 设置 为 红色 ， 代 码 如 下 : 


$('#myTable td').click(function(){ 
$(this).css('background', 'red'): 


je 

假设 有 100 个 td 元 素 ， 在 使 用 以 上 方式 的 时 候 ， 你 绑 定 了 100 个 事件 ， 这 将 带 来 很 负面 的 性 能 
有 影响。 那么 有 什么 更 好 的 方式 呢 ? 
代替 这 种 效率 很 差 的 多 元 素 事 件 监听 的 方法 就 是 ， 你 只 需 向 它们 的 父 节点 绑 定 一 次 习 
通过 event.target 获取 到 点 击 的 当前 元 素 ， 代 码 如 下 : 















































件 ， 然 后 


ey 




















$('#myTable').click(function(e) { 
var $clicked = $(e.target); // e.target D000000000 
$clicked.css('background', 'red'): 


es 
在 改进 方式 中 ， 你 只 为 一 个 元 素 绑 定 了 1 个 事件 。 显然 ， 这 种 方式 的 性 能 要 优 于 之 前 那 种 。 
同时 ， 在 jQuery 1.7 中 提供 了 一 个 新 的 方式 on()， 来 帮助 你 将 整个 事件 监听 封装 到 一 个 便利 方法 ! 
如 下 所 示 : 


$('#myTable').on('click', 'td' ,function() { 
Suths Ness vackorouwmnd ee red 



























































es 
70000I jQuery0 0 
如 果 你 每 次 都 需要 花 上 一 定 的 时 间 去 开发 类 似 的 jQuery 代码 ， 那 么 你 可 以 考虑 将 代码 变 成 插件 。 
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它 能 够 使 你 的 代码 有 更 好 的 


mn 
mn 
































性， 并且 能 够 有 效 的 帮助 你 组 织 代码 。 创 建 一 个 插件 代码 如 下 : 














(function($){ 
$.fn.yourPluginName = function(){ 
// Your code goes here 
return this; 
De 
}) (jQuery); 





8000 joind00000I 









































也 许 你 之 前 一 直 使 用 "+" 来 拼接 长 字符 串 ， 现 在 你 可 以 改 改 了 。 虽 然 它 可 能 会 有 点 奇怪 ， 但 它 
确实 有 助 于 优化 性 能 ， 尤 其 是 长 字符 串 处 理 的 时 候 。 





















































f 先 创建 一 个 数组 ， 然 后 循环 ， 最 后 使 用 join0 把 数组 转化 为 字符 串 ， 代 码 如 下 : 





Va or ev [| 
for(var i=0;i<=10000;ir+) { 
oav i i 





} 
$('#list').html (array.join('')): 


900000 HTML50D DataDD 


HTML 5 的 data 属性 可 以 帮助 我 们 插入 数据 ， 特 别 是 前 后 端的 数据 交换 。jQuery 的 data0 方 法 ， 
有 效 的 利用 HTMLS5 的 属性 ， 来 自动 得 到 数据 。 下 面 是 个 例子 : 











ws 



































<div id="dl" data-role="page" data-last-value="43" 
data-options="'{"name":"John"}'></div> 


为 了 读 取 数 据 ， 你 需要 使 用 如 下 代码 : 


























$("#d1l").data( "role"): // "page" 
$("#d1").data("lastValue"); WAe 
$("#d1").data("options").name; // "John"; 





10[D0000000 Javascript 























下 面 一 段 代码 ， 它 用 来 判断 多 选 框 是 否 被 选中 : 








vane te HO er een 
der emervmemon 
if(s$cr.is(":checked")){ jQuery 加 四 冲冲 
galarzC 加 时 本 4 本 
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000jouev00 200 











它 使 用 了 jQuery 提供 
方法 ， 看 下 面 代 码 : 


























Var $cr = $("#cr"): 

var cr = $cr.get(0); 

$cr.click(function(){ 
if( cr.checked ){ 


//jQuery 
//DOMOD 


的 is0) 方 法 来 判断 多 选 框 是 


否 选中 ， 但 这 里 可 以 直接 使 用 原生 的 JavaScript 





0D0 
[oe el 


yal ln ol ene /go 

































































alertIOO0000000000!): 

}) | 
旺 良 置疑， 第 二 种 方式 效率 高 于 第 一 种 方式 ， 因 为 它 不 需要 拐弯 抹 角 的 去 调用 许多 函数 。 
还 有 更 多 类 似 的 操作 。 把 如 下 代码 : 

(SSOSSC EDOIOT red 
优化 成 : 

this.style.color ="red"; 
把 如 下 代码 : 

Ca 
优化 成 : 








经 验 告 诉 我 们 ， 
110 D0 0 JavaScript 





( document .createElement("p") ); 


方法 的 选择 很 重要 ， 








有 时 候 你 也 许 根本 不 需要 jQuery。 

















现在 的 Web 项 目 总 是 
的 感知 性 能 。 医 


离 不 天 




















此 ， | JavaScript 文件 进行 压缩 ， 





FF 大量 








而 JS 文件 的 体积 越 来 越 大 ， 随 之 也 影响 到 页 再 
一 方面 是 使 用 Gzip; 另 一 除 





JavaScript, 



































JavaScript 文件 里 的 注释 、 








方面 则 是 去 除 
下 日 压缩 局 部 变量 长 度 等 。 





全 





都 会 提供 “完整 版 ”和 “ 
版 中 修改 ， 对 于 压缩 版 

压缩 JavaScript 的 工具 有 
压缩 脚本 文件 《后 者 还 可 
和 UglifyJS。 


ED wea 0 0 


如 今 ， 越 来 越 多 的 人 在 使 




































































对 于 一 些 成 熟 的 类 库 来 说 ， 它 们 本 身 



































ee a ee a i 
9 然 就 无 能 为 力 了 。 此 外 ， 














己 写 的 JavaScript 文件 也 需要 压缩 。 











很 多 ， 你 可 以 使 用 老牌 的 JSMin，YUI Compressor， 它 们 都 可 以 用 来 
以 处 理 




















CSS)， 也 可 以 使 用 一 些 新 的 工具 ， 比 如 Google Closure Compiler 





] jQuery 类 库 。 这 也 意味 着 ， 需 要 越 来 越 多 有 用 的 jQuery 技巧 和 解 








决 方案 。 下 面 是 我 整理 的 一 些 实用 的 jQuery 技巧 。 
i10000000000 


200000000 


300000000 





需要 注意 的 是 ， 在 jQuery 1.3 版 本 之 后 ， 官 方 推 荐 使 用 $.support 来 代替 $.browser 这 种 检测 方式 。 
40000000000000 


5000000000 


60000000 





70O0000000 


8000 dv00000 


a00000000000000 


lo0000 dv0O0O000 
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12000000000 


1300000000000 


140000000 


1500000 Ajax 
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$('#someElement').find('option:selected') 
$('#someElement option:selected'): 


17000O00D0 














var tog = false: 
snuson ec 
$("input[type=checkbox]").attr("checked", !t0g):; 






































tog = tog: 
))s 
180 | siblings()O OOO000I 
洲 加 加 加 上 





$('#nav 1i').click(function(){ 
$('#nav 1i').removeClass('active') 
Poms adudelass( act ve 

bE 

加 加 加 加 加 加 

$('#nav 1i').click(function(O){ 
$(this).addClass('active') 

.Siblings().removeClass('active'): 





) 
190000D0I 




















$(document).ready(function(){ 
有 ne = Dota maddoless( on 
yalen zl wadudoless (in 
galmneft = psdnl audolass( sd 
Ds 


20000000000 DDDO 


V2 esetameow 加 加 加 各 加 可 加 加 
setTimeout(function() { 

$('div').fadeIn(400) 
000 
VA Ed Sa 
$("div").slideUp(300).delay(3000).fadeIn(400): 
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// $('#someDiv').1log('div'): 
jQuery.10g = jQuery.fn.1og = function (msg) { 


323 


324 


000 jQueyI0 200 


if (console){ 































































































eonsolemloon so meg eso 
} 
return this; 
后 
220000 DOI 吓 加 加 趾 
We 加 ie 
wa Ove ea 2 
$("table").each(function()t{ 
ES ve ie eion 
$(this).toggleClass("hover"): 
DE 
os 
// jQuery 1.4.20000D0 


$("table").delegate("td", "click", 
$(this).toggleClass("hover"): 


function(){ 


we ower aa 
scable Rome ennek ee bo nme 
$(this).toggleClass("hover"): 




















DD cssU0 











jQuery.cssHooks 是 1.4.3 新 增 的 方法 ， 当 你 定义 新 的 CSS Hooks 时 实际 上 定义 的 是 getter 和 setter 














法 ， 比 如 ，border-radius 这 个 圆 角 属性 
前 级， 比如 -moz-border-radius 和 -webkit-border-radius。 你 可 以 通过 定义 CSS Hooks 将 其 
0 口 borderRadius， 而 不 是 一 一 设置 css 属性 。 代 码 如 下 : 
































$.cSsHookS[L borderRadius ] = { 
get: function(elem, computed, extra)t{ 
// Depending on the browser, read the value of 


// -moz-border-radius, -webkit-border-radius or border-radius 


set: function(elem, value){ 
// Set the appropriate CSS3 property 


ee 
// Use: 
$('#rect').css('borderRadius' ,5):; 





更 多 cssHooks 可 以 查看 https://github.com/brandonaaron/jquery-cssHooks。 
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: 想 要 成 功 应 用 于 firefox、webkit 等 浏览 器 ， 需 要 增加 属性 





封装 成 统 
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240 $.proxy() 


使 用 回调 方法 的 缺点 之 一 是 当 执行 类 库 中 的 方法 后 ， 上 下 文 对 象 被 设置 到 另外 一 个 元 素 ， 比 如 ; 
























































<div id="panel" style="display:none"> 
<button>Close</button> 
</div> 


执行 下 面 代码 : 

















$('#panel').fadeIn(function(){ 
$('#panel button').click(function(){ 
$(this).fadeOut(): 
}) 
DD 


你 将 遇 到 问题 ，button 元 素 会 消失 ， 而 不 是 panel 元 素 。 可 以 使 用 $.proxy 方法 解决 这 个 问题 ， 
代码 如 下 : 











$('#panel').fadeIn(function(){ 

// Using $.proxy : 

$('#panel button').click($.proxy(function(){ 
// this DO 0 #panel 
$(this). fadeQut(); 

Ds 


这 样 才 正 确 的 执行 。 
250 | 
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jQuery.fn.maxLength = function(max){ 
this.each(function(){ 
var type = this.tagName.toLowerCase() : 
var inputType = this.type? this.type.toLowerCase() : null: 
if(type == "input" && inputlype == "text” || inputType == "password"){ 
/DODODOD maxLength 
this.maxLength = max: 





}else if(type == "textarea"){ 
this.onkeypress = function(e){ 
varobe eneven 
var keyCode = 0b.keyCode: 
var hasSelection = document.selection? document.selection.createRange().text.length > 0 : 
this.selectionStart != this.selectionEnd; 
nean sv Veleng mae od Oe le de leode 
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000jaueyv00 200 


== 13) && !ob.ctrlkey && !ob.altkey && !hasSelection): 
和 
this.onkeyup = function(){ 
if(this.value. length > max){ 
this.value = this.value.substring(0,max): 


} 


} 
bs 
lj 
//use 
$( 加 ytextarea ) .maxLength(10); 








26000D0 


本 地 存储 是 HTML 5 提供 的 特性 之 一 。 它 提供 了 非常 简单 的 API 接口 ， 便 于 添加 你 的 数据 到 
localStorage 全 局 属性 中 ， 代 码 如 下 : 















































ocalStorage.someData = "This is going to be saved ": 


事实 上 对 于 老 的 浏览 器 来 说 ， 这 并 不 是 个 好 消息 ， 因 为 他 们 不 支持 ， 但 是 我 们 可 以 使 用 jQuery 的 插件 


(http://plugins.jquery.com/plugin-tags/localstorage〉 来 提供 支持 ， 这 种 方式 可 以 使 得 本 地 存储 功能 正常 工作 。 
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jQuery 在 1.4 版 本 后 ， 采 用 了 更 为 严格 的 json 解析 方式 ， 即 所 有 内 容 都 必须 要 有 双 引 号 ， 如 果 
升级 jQuery 版 本 后 ，ajax 加 载 json 报错 ， 有 可 能 就 是 这 个 原因 。 比 如 : 


















































wa400000 ky 


{ 

key :"28CATEGORY", 
SS 

} 





但 升级 成 jQuery 1.4 后 ， 都 必须 加 上 双 引 号 ， 格 式 如 下 : 


{ 
"key": "28CATEGORY", 


SEE 


280000000 HTML 

















(function($) { 
$.fn.stripHtml = function() { 
Ee ETT 





29000 strngDDUOOD 
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var ch = this.charAt(i); 

if (ch!=" "&& ch!="\n” && ch!="\t" && chl="\r") {return false;} 

} 

return true; 

isPhone:function() { 

return (new RegExp(/(~([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)| (~\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)| 
(ue reset 

入 

isUrl:function(){ 

return (new RegExp(/“^[a-zA-z]+:\/\/([a-zA-720-9\-\.J+)([-\w .\/?%8=:]*)$/).test(this)) 

上 

isSExternalUrl:function(){ 

return this.isUrl() && this.indexOf("://"+document.domain) == -1:; 


Ds 


//use 





$("input").val().isIinteger(); 


0 
本 章 3 


主要 讲解 了 两 部 分 内 容 ，jQuery 性 能 优化 和 技巧 ， 相 信 这 些 能 在 实际 操作 中 会 有 非常 大 的 





























帮助 。 


如 今 ， 互 联网 已 经 发 生 翻 天 覆 地 的 变化 ，Ajax、 模 板 引 擎 和 MVC 开发 等 一 些 新 型 的 Web 应 用 
正信 受 开发 者 的 青睐 ,与 此 同时 ， 用 户 的 需求 也 越 来 越 高 。JavaScript 作为 增强 交互 的 脚本 语言 也 
越 来 越 受 到 重视 ， 而 jQuery 作为 一 个 JavaScript 脚本 库 ， 相 信 前 途 也 是 一 片 光 明 。 


未 来 掌握 在 自己 手中 ， 祝 读者 朋友 早日 成 为 一 名 真正 的 Web 前 端 开发 工程 师 。 

































































HDA ODS$documentb.ready() 
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学 习 jQuery 的 第 1 个 步 又 就 应 该 学 习 $(document).ready0 函 数 。 例 如 要 在 页 面 上 运行 一 个 
JavaScript 函数 ， 那 么 就 应 该 将 它 写 在 $(document).ready0) 函 数 内 。 在 该 函数 内 的 所 有 代码 都 将 在 








DOM 加 载 完毕 后 ， 页 面 

















全 部 内 容 〈 包 括 图 片 等 ) 完全 加 载 完毕 前 被 执行 。 











jQuery 代码 如 下 : 


$(document).ready(function() { 


VA QU 
Ds 











$(document).ready(0) 函 数 相 比 其 他 获得 JavaScript 事件 并 执行 相应 事件 的 函数 有 很 多 优势 。 


该 函数 不 需要 在 HTML 代码 




















进行 任何 “行为 ” 标记， 就 可 以 分 离 JavaScript 代码 到 每 一 个 独 


立 的 文件 中 。 因 此 很 容易 对 与 内 容 无 关 的 代码 进行 维护 。 当 光标 在 一 个 链接 上 悬 停 时 ， 在 浏览 器 的 
状态 栏 中 会 出 现 “javascriptvoid0” 的 信息 ， 该 信息 就 是 由 于 在 一 个 <a> 标 签 中 直接 写 入 一 个 事件 














而 产生 的 。 


























并 且 同 时 也 将 “行为 ”标记 引入 到 了 页 
如 何 创 建 一 个 addLoadEvent 函数 以 便 将 JavaScript 分 离 成 单独 的 文件 











































































































但 是 它 需要 一 定数 量 且 复杂 的 代码 去 实现 这 个 功能 。 














所 有 内 容 被 加 载 完 毕 后 









































六 








才 执 行 。 由 于 以 上 种 种 原 









































-一 










































































其 


在 一 些 传统 的 页 面 中 ， 可 能 会 在 <body> 标 签 里 有 onload 属性 ， 该 属性 限定 只 能 执行 一 个 函数 ， 
内容 中 。Jeremy Keith 所 车 的 《DOM Scripting》 展 示 了 
并 允许 加 载 多 个 函数 。 

同时 ， 用 它 加 载 的 函数 ， 也 是 必须 要 等 页 面 
本 书 选择 了 更 为 先进 的 $(document).ready() 


在 $(document).ready() 函 数 括号 中 的 所 有 代码 都 会 提前 (只 要 DOM 在 浏览 器 中 被 注册 完毕 ) 
被 执行 ， 而 不 是 在 页 面 所 有 内 容 〈 例 如 图 片 等 占用 带宽 的 内 容 ) 加载 完毕 之 后 才 执 行事 件 
允许 用 户 在 第 一 眼看 到 元 素 的 时 候 ， 就 能 立即 看 到 元 素 产 生 的 一 些 隐 藏 效果 、 显 示 效 果 和 


[CS 


他 
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0 0 :OO YH 0 


本 节 介 绍 $(document).ready0) 函 数 的 男 一 个 功能 ， 即 它 可 以 被 多 次 使 用 。 如 果 不 太 在 意 代 码 的 


大 小 ， 


还 是 在 多 个 文件 中 ， 它 都 可 以 将 这 些 函 


例如 在 项 目 中 ， 每 个 页 面 中 
而 且 它 们 都 需要 调 















































那么 可 以 将 $(document).ready() 






























































P 都 引 


JavaScript 文件 ，jQuery 代码 如 下 : 


<SehloO 
和 Se 
<Seroe 




















3T 





函数 放 到 所 有 的 JavaScript 文件 
数 归 组 。 





个 公共 js 文件 





= 并 








type="text/javascript" src="/scripts/jquery.js"></script> 
type="text/javascript" src="/scripts/common.js"></script> 
type="text/javascript" src="/scripts/homepage.js"></script> 
































PhP。 无 论 函 数 是 在 一 个 文件 中 





日 每 一 个 js 文人 
]$(document).ready0) 函 数 。 那 么 可 以 在 首页 的 <head> 标 签 中 ， 


然后 可 以 在 每 一 个 独立 的 .js 文件 中 反复 调用 该 函数 ，jQuery 代码 如 下 : 


$(document).ready(function() { 
a ove oo 


po 


$(document).ready(function() { 
vey 加 加 


I 











F 仅 仅 在 











页 中 被 引用 ， 














同时 加 载 3 个 


最 后 需要 注意 的 是 ， 可 以 使 用 $(functionO{...})) 来 代 蔡 $(document).ready0 〇 函数 ， 作 为 它 的 缩写 
形式 ， 缩 写 方式 如 下 : 


$(function() { 
大 加 国光 四 四 四 四 加 加 


上 














+» [ol 


Firebug 是 














沉 开 发 的 工具 ， 





个 用 于 网 站 前 让 


es 








4 


志方 网 站 是 www.getfirebug.com/。 


已 





功能 。 
1I0 Firebug 口 0 


查看 和 编辑 HTML. 

动态 修改 CSS 样式 。 

可 视 化 的 CSS 距离 调整 。 
监控 网 络 行为 。 

分 析 与 调试 JavaScript。 
快速 发 现 错误 。 

查看 DOM。 

即时 执行 JavaScript 代码 。 
记录 JavaScript 日 志 。 


200000 Firebug 





©0000000©00© 











查看 DOM、 分 析 CSS、 ds Ajax 交互 等 。 它 提供 了 几乎 前 端 


DD B Firebug 





是 Firefox 浏览 器 的 一 个 扩展 插件 。 它 可 
出 开 


以 调试 JavaScript、 
发 需要 的 全 部 























因为 它 是 Firefox 浏览 器 的 一 个 扩展 插件 ， 所 以 首先 需要 下 载 Firefox 浏览 器 ， 读 者 可 以 访问 
www.mozilla.com 下 载 并 安装 Firefox 浏览 器 。 本 书 以 Firefox 11.0 为 例 。 在 安装 完 Firefox 浏览 器 之 后 ， 用 它 


访问 https://addons.mozilla.org/zh-CN/firefox/addon/1843， 进 入 

















图 B-1 所 示 的 页 面 。 点 击 “ 添 加 到 Firefox” 按 























有 安装” 按钮， 最 后 重新 启动 Firefox 浏览 器 即 可 完成 安装 。 


钮 ， 会 弹出 图 B-2 所 示 的 对 话 框 ， 然 后 单 击 “ 立 月 
会 » 扩 睦 »Firebus 
a Firebug 19.1 
作 看 Joe Hewitt, Jan Odvarko, robeee, Fircbal 


0 B-1 











可 得 的 丰富 开 败 工具 .你 可 以 对 任 售 


调试 和 监控 n\nFirebug 1.4 仅 支 持 


Firebug 口 口 
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公安 装 您 所 信任 的 作者 的 附加 组 件 。 
亚 意 软件 可 能 会 损 宕 您 的 计算 机 或 者 恤 宕 您 的 隐私 。 


您 选择 安装 下 列 项 目 : 


Firebug  【 寺 芭 涝 扑 作 才 ) 
https://addons. mozilla. org/firefok/ downloads/latest/1843/addon-1843-latest. 

















0 B-2 FirebugDDD 


区 00000 


安装 完成 后 ， 在 Firefox 浏览 器 的 地 址 后 方 就 会 有 一 个 小 虫子 的 图 标 装 。 单 击 该 图 标 后 即 
可 展开 Firebug 的 控制 台 , 也 可 以 通过 et 如 果 有 多 个 显示 器 或 者 屏幕 
比较 大 ， 需 要 Firebug 能 够 独立 打开 一 个 窗口 而 不 占用 Firefox 页 面 底部 的 空间 ， 可 以 用 通过 快 
捷 键 Ctrl+F12 来 呼出 独立 的 Firebug 窗口 。 如 图 B-3 所 示 。 









































| 编辑 TS 
1DOCTYPE btal) 
日 <html itemtype="http://schena. org/WebPage” itemscope=" "> 


因 <head> 





由 《<center> 


国 <div 








《1htal> 














0 B-3 FirebugDD 


从 图 B-3 中 可 以 看 出 ，Firebug 总 共 包 含 6 个 面板 , 分 别 是 控制 台 、HTML、CSS、 脚 本 、DOM 
和 网 络 。 


加 ”控制 台面 板 




















用 于 记录 日 志 、 概 览 、 错 误 提示 和 执行 命令 行 ， 同 时 也 用 于 Ajax 的 调试 。 
日 ”HTML 面板 





用 于 查看 HTML 元 素 ， 可 以 实时 地 编辑 HTML 和 改变 CSS 样式 。 它 包含 3 个 子 面板 ， 分 别 是 





] B Firebug 




















样式 、 布 局 和 DOM 面板 。 


加 CSS 面板 











用 于 查看 所 有 页 面 上 的 CSS 文件， 可 以 动态 地 修改 CSS 样式 。 由 于 HTML 面板 中 已 经 包含 了 
一 个 CSS 面板 ， 因 此 该 面板 将 很 少 用 到 。 


加 ”脚本 面板 

























































































用 于 显示 JavaScript 文件 及 其 所 在 的 页 面 。 也 可 以 用 来 显示 JavaScript 的 Debug 调试 ， 包 含 3 个 
子 面板 ， 分 别 是 监控 、 堆 栈 和 断 点 。 


加 DOM 面板 









































用 于 显示 页 面 上 的 所 有 对 象 。 
加 网络 面板 
























































] 于 监视 网 络 活动 。 可 以 帮助 查看 一 个 页 面 的 载 入 情况 ， 包 括 文件 下 载 占 用 的 时 间 和 文件 下 载 
8 错 等 信息 ， 也 可 以 用 于 监视 Ajax 行为 。 




















| aa 

















B.21] 00O0O00 
100000000 
此 面板 可 以 用 于 记录 日 志 ， 也 可 以 用 于 输入 脚本 的 命令 行 。 
200000 














Firebug 提供 如 下 几 个 常用 的 记录 日 志 的 函数 。 




















console.log: 简单 的 记录 日 志 。 
































console.debug: 记录 调试 信息 ， 并 且 附 上 行 号 的 超 链接 。 




















console.error: 在 消息 前 显示 错误 图 标 ， 并 且 附 上 行 号 的 超 链接 。 



































console.info: 在 消息 前 显示 信息 图 标 ， 并 且 附 上 行 号 的 超 链接 。 


























console.warn: 在 消息 前 显示 警告 图 标 ， 并 且 附 上 行 号 的 超 链接 。 



































在 空白 的 html 页 面 中 ， 疝 <body> 标 签 里 加 入 <script> 标 签 ， 代 码 如 下 ; 


<script type="text/javascript"> 
console.log('This is 10g message'): 
console.debug('This is debug message'): 





Console.error( This is error message ' ) ; 
Console.info( ' This is info message'): 
console.warn('This is warning message ) ; 


</script> 
执行 代码 后 可 以 在 Firebug 中 看 到 图 B-4 所 示 的 效果 。 尝 守 《< > 三 || [RMS 7 | am 








i | 清除 保持 概况 | 所 有 | 错误 
以 前 习惯 了 使 用 alert 来 调试 程序 ， 然 而 在 Firebug 下 可 以 使 用 于 ss es esse 
console。 总 人 :) 





























0 This is info message 


3000000000000000 This is warnine aescaes 
084 000000 








这 个 功能 类 似 于 C 语言 中 的 语法 ， 可 以 在 console 记录 日 志 的 
方法 里 使 用 。 
































© %s: 字符 串 。 
© %d，9%6i: 数字 。 

© yr: 浮 点 数 。 
9 %o: 链接 对 象 。 


同时 ， 这 儿 个 函数 支持 多 个 变量 。 代 码 如 下 : 





var animal="0D " ,count="3",auther="0D 0 ": 

var thingl="0 O00 ",thing2="0 O00 ",thing3="0 O00 ": 
VA 

console.1log("%d0D %s0 O000", count, animal): 
eonsolenloo on ne anal 
console.1og("%s[0D 0 :",auther, thingl, thing2, thing3): 


运行 代码 后 ， 效 果 如 图 B-5 所 示 。 





Wm 《 > | -| 控制 全 < HTL CSS 脚本 DOE 网 络 
i | 清除 保持 概况 | 所 有 | 错误 警告 消息 调试 信息 
3 个 猫 按 入 陷 队 

3 个 猫 按 入 陆 除 

已 多 写本: 《未 》 《者 》 《到 》 


D 8B-5 console.log0DO0OO0OO 
Firebug 控制 台 还 提供 了 其 他 功能 ， 例 如 检测 函数 执行 时 间 、 消 息 分 组 、 测 试 驱动 、 跟 踪 、 计 数 
以 及 查看 JavaScript 概况 等 。 更 多 资料 可 以 访问 网 址 : http://getfirebug.com/logging。 














400000000 
在 图 B-5 中 ， 在 控制 台面 板 内 有 一 排 子 菜单 ， 分 别 是 清除 、 保 持 、 概 况 、 所 有 等 。 
的 内 容 。“ 保 持 ” 则 是 把 控制 台中 的 内 容 保存 ， 即 使 刷新 了 还 在 。 “所 有 ” 




























































































“清除 ”用 于 清除 控制 台 
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则 是 显示 全 部 的 信息 。 后 面 的 “错误 “和 警告”“ 消 息 ”“ 调 试 信息 ” 菜 上 

































































和 则 是 对 所 有 进行 了 一 个 分 类 。 








“概况 ”菜单 用 于 查看 函数 的 性 能 。 通 过 一 个 例子 来 演示 这 个 功能 ，HTML 代码 如 下 : 


<button type="button" 
<button type="button" 
<button type="button" 





ea ons /von 
Wea en SA ton 
id="btn3">0 0 O00 3</button> 


<script type="text/javascript"> 





var fl=function 


al 


和 


} 
ET 


ope QVvare 0 O00 io a O00 


} 


document .getElementById('btnl').onclick=f1: 
document .getElementById('btn2' ).onclick=f2: 
document .getElementById('btn3').onclick=function() { 
for (var i=0: i<1000; ir+)for (var j=0; j<1000; j++): 


} 


有 Seo 





打开 页 














从 上 图 中 可 以 








单 击 “ 概 况 ” 菜 音 


























[入 环 1 [执行 全 对 2 ] [ 执 生生 于 3 ] 


看 后 ， 先 启用 Firebug 控制 台面 板 ， 然 后 单 击 “ 概 况 ” 荣 














单 ， 如 








训导 《 》 三 | -| 控制 人 -| HT css 脚本 DO 网 络 
I% ”清除 ”保持 | 概况 | 所 有 | 错误 警告 消息 调试 信息 











3% 生 碗 疏失 中 - 再次 点 击 " 熏 况 "查看 藻 呈 - 


086 00“00”000 


看 到 ，Firebug 中 出 现 一 行 字 ， 即 “概况 收集 中 。 昨 
接着 ， 单 击 “ 执 行 循环 1” 按钮 1 次 ,“ 执 行 循环 2” 按钮 2 次 , “执行 循环 3” 按钮 3 次 ， 并 再 








， 即 可 看 到 图 B-7 所 示 的 效果 。 








向 呈 《 2 三 








日 麦 况 (19.584 误 戎 。 6 次 再 背 ) 


| 控制 全 ”| 本 王 CSS_ 幅 地 “DO 网 络 


到 清除 保持 概况 | 所 有 | 错误 “警告 消息 调试 信息 





图 B-6 所 示 。 





次 单 击 “ 概 况 ” 查 看 结果 


























尝 “: 





匠 


画 教 。 以 月 分 此 | 占 月 时间。 时间。 子 均 时 间 最 小 时 间 及 时 间 。 ， 


anonymous 3 50.03% 9.798ms 9.798ms 3,266ms 
£2 2 32.89% 6.442ms 6.442ms 3,22Ims 
anonyaous 1 17.08% 3.344ms 3.344ms 3,344ms 


3.158ms 


3,171ims 


3.344ms 


087 0000“00”000 
可 以 看 到 Firebug 显示 出 了 非常 详细 的 报告 。 包 括 每 个 函数 的 函数 名 、 调 用 次 数 ， 占 用 时 间 





3.365ms 


3.271ms 


3.344ms 
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000jouev00 200 


























的 百分比 、 占 用 时 间 、 时 间 、 平 均 时 间 、 最 小 时 间 、 最 大 时 间 以 及 所 在 文件 的 行 数 等 信息 。 


























50 AjaxDDD 








空 人 





























制 台面 板 也 可 用 于 Ajax 的 调试 ， 在 一 定 程度 上 可 以 取代 网 络 面板 。 这 一 段 涉及 Ajax 交互 ， 











故 引 入 了 jQuery 库 。 同 时 由 于 本 地 环境 下 Ajax 创建 的 XMLHttpRequest 对 象 无 法 跨 域 访问 到 网 











络 的 资源 ， 因 此 需要 搭建 服务 器 环境 。 代 码 如 下 : 





<script type="text/javascript" src="../scripts/jquery.js"></script> 


<label for="passStr">000OOOD</label><br /> 


<input type="text" id="passStr" value="Firebug=1.9.1&jQuery=1.7.1" size= "35"/><br /> 


<button type="button” id="btnl">0 0 Ajax0 0 </button> 
<script type="text/javascript"> 
$("#btn1").click(function(){ 





$.ajax({ 
url:"firebug4.php", 
type: "get", 
data:$("#passStr").val() 
) 六 
人 
</script> 






































直接 单 击 “ 进 行 Ajax 传递 ”按钮 ， 即 可 在 Firebug 的 控 
容 恩 和 服务 器 响应 的 头 信 息 ， 如 图 B-8 所 示 。 它 会 显示 出 本 次 





章 台 中 看 到 本 次 Ajax 的 HTTP 请 求 头 


























使 用 Ajax 的 GET 方法 、 地 址 、 耗 


时 以 及 调用 Ajax 请 求 的 代码 行 数 。 最 重要 的 是 有 4 个 标签 页 ， 即 参数 、 头 信息 、 响 应 、HTML。 
































第 1 个 标签 用 于 查看 传递 给 服务 器 的 参数 ， 第 2 个 标签 用 于 查看 响应 头 信 息 和 请 求 头 信息 ; 第 3 个 
标签 用 于 查看 服务 器 返回 的 内 容 。 第 4 个 标签 则 是 查看 服务 器 返回 的 HTML 结构 。 进 行 Ajax 
交互 编程 时 ， 以 上 功能 是 非常 有 用 的 。 读 者 可 以 尝试 改变 文本 框 中 传递 的 参数 ， 再 次 单 击 “ 进 





























行 Ajax 传递 ”按钮 ， 观 察 Firebug 中 的 变化 。 





如 果 看 不 到 任何 信息 出 现 ， 可 能 是 将 此 功能 关闭 了 ， 可 以 











将 “显示 XMLHttpRequests” 前 面 的 勾 勾 选 上 ， 如 图 

















融 喇 2 三 |"| 控 制 人 -|Hmm css 著 寺 DoE 网络 LP | 
及 | 清除 保持 概况 | 所 有 | 错误 警告 消息 调试 信息 
3 GET http://localhost/flB-firebug /firebug4.php?Firebug=1.9.1&jQuery=1.7.1 200 OK 30ms jquery. js (第 4 行 ) 


参数 ” 闲 信 息 ”者 应 HTML 
这 是 一 个 测试 刚才 传递 的 参数 是 : 
Firebug=1.9.1 
j ,多 


jQuery=1.7.1 


D6-8 Maxg00UO 
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B-9 所 示 。 


Ek 


EA 


























# 制 合 ” 劳 边 的 下 拉 箭 头 ， 


地 
ml 
Lll 

~ 

和 
成 
人 

-hh 








[| 控制 全 已 | TE， CSS 肢 直 “DOW 网 络 





3 | 清除 保持 概况 | 月 ”局 有 
习 GET http://localhost/fle-firebug/{ v 显示 JavaScript 错误 
人 
参数 ” 头 信息 区 应 ”HTML 


这 是 一 个 测试 ， 刚 才 传 着 的 参数 是 : 
Firebug=1.9.1 


jQuery=1.7.1 









显示 JavaScript 五 此 


显示 外 部 错误 

v 显示 网 络 错误 
显示 堆栈 状态 及 其 错误 
严格 警 汗 (有 损 性 能 ) 
命令 行 编辑 器 

v 弹出 自动 补 全 列表 


DB-9 OO XMLHttpRequests 


B.2.2 HTMLDOD 





lD00000 HTIMLDI 




















HTML 面板 上 
写 如 下 的 代码 来 讲解 该 面板 。 


(个 





























<DOCTYBENnEmI UB SAWS/AADTORXEIMIO ON mans onalAEN 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Firebug</title> 
<meta http-equiv="Content-Type” content="text/html; charset=utf-8” /> 
<meta name="generator" content="editplus” /> 
<style type="text/css" title="test"> 
div.test{border: lpx solid #ccc;margin: 20px;} 
.test span{color: red;} 
.test strong{color: green;} 
.test em{color: blue;} 
form.test{float:right:padding:20px:border: lpx solid #ccc;} 
</style> 
</head> 
<body> 








<div class="test"> 
<span>0 0 </span><br /> 
<strong>0 0 </strong><br /> 
<emz0 0 </em> 
</div> 
<form method="post" action="#" class="test"> 
<input type="text"/><input type="radio"/><button>0 0 </button> 
</form> 
<script type="text/javascript"> 
Var fl=function() { 
formvari 0 L000 ho ver 0 < L000 二 
} 
全 
forevar 0000 i om va 0 O00 
} 
</script> 
</body> 
</html> 














DB Firebug 


强大 之 处 就 是 能 查看 和 修改 HTML 代码 ， 而 且 这 些 代 码 都 是 经 过 格式 化 的 。 编 
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在 Firebug 中 切换 到 HTML 面板 ， 可 以 看 到 图 B-10 所 示 的 页 面 。 


o [EE] 





















& | 全 加 boay <“ html 
1DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” 
日: html xmlns=“http://maw.w3- org/1999/zhtal7 > 
困 <head> 
旦 | 
困 <div class= test”> 
困 <form class="test” action="#” method="post”> 





困 《script type="text/javascript”> 
/body> 
《Ahtaml> 


081000000 


在 HIML 控制 台 的 左 侧 可 以 看 到 整个 页 面 当前 的 文档 结构 ， 可 以 通过 单 击 “+” 来 展开 。 当 单 
击 相应 的 元 素 时 ， 右 侧面 板 中 就 会 显示 出 当前 元 素 的 样式 、 布 局 以 及 DOM 信息 。 而 当 光 标 移 动 到 
HTML 树 中 相应 元 素 上 时 ， 上 面 页 面 中 相应 的 元 素 将 会 被 
高 亮 显示 。 例 如 将 光标 移动 到 <form> 标 签 上 时 ， 显 示 效 果 如 
图 B-11 所 示 。 

在 页 面 中 蓝 色 部 分 表示 元 素 本 身 ， 紫 色 表 示 padding 
部 分 ， 而 黄色 表示 margin 部 分 。 同 时 可 以 实时 地 添加 、 D611 O00000fom0000 
修改 和 删除 HTML 节点 以 及 属性 ， 如 图 B-12 所 示 。 另 外 ,， 单 击 script 节点 还 可 以 直接 查看 肢 
本 ， 此 处 的 脚本 无 论 是 内 骨 在 HTML 中 还 是 外 部 导入 的 ， 都 可 以 查看 到 。 同 样 这 也 适用 于 
<style> 标 签 内 髓 或 者 导入 的 CSS 样式 和 动态 创建 的 HTML 代码 。 


20D D0 0 0 Inspect0 
利用 查看 (Inspect) 功 能， 可 以 快速 地 寻找 到 某 个 元 素 的 HTML 结构 ， 如 图 B-13 所 示 。 


















































Bbody> 
国 <diy class="test"> 





B 《<script type=" text/javascript"> 


var fl=functionQ) { 
for (var i=0; i<1000; i++)for (var j=0; j<1000; j++); 


for (var i=0; i<1000; it+)for (var j=0; j<1000; j++); 





2 

3 

4| 1} 

5 function f20 { 
6 

了 


} 
8 


de | bo hl 
0 B612 O0000 HMOO B13 000inspectD on 
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四 四 00B Firebug 
































例如 当 单 击 “Inspect” 按 钮 后 , 用 鼠标 在 网 页 中 选中 一 个 元 素 时 ,元素 会 被 一 个 蓝 色 的 框框 住 ， 
同时 下 面 的 HTML 面板 中 相应 的 HTML 树 也 会 展开 并 且 高 亮 显 示 。 再 次 单 击 后 即 可 退出 该 模式 ， 
并 且 底 部 的 HTML 树 也 保持 在 这 个 状态 。 通 过 这 个 功能 ， 可 以 快速 寻找 页 面 内 的 元 素 ， 调 试 和 碍 


找 相 应 代码 非常 方便 。 刷 新 网 页 后 ， 页 面 显示 的 仍然 是 用 Inspect 选中 的 区 域 。 





















































Lll 















































































































































HTML 面板 下 方 的 “编辑 ”按钮 可 以 用 于 直接 编辑 选中 的 HTML 代码 ， 而 后 面 显示 的 是 当前 
元 素 在 整个 DOM 中 的 结构 路 径 。 


























3000 DOMODODO0000000 
通过 JavaScript 来 改变 样式 属性 的 值 可 以 完成 一 些 动画 效果 。 例 如 提供 例子 中 的 暗箱 操作 例子 ， 
打开 页 面 后 ， 可 以 利用 查看 (Inspect) 功能 来 选择 相应 的 HTML 代码 。 例 如 选中 例子 的 中 间 区 域 ， 


如 图 B-14 所 示 。 


Ci 
“| 样式 样式 > | 计 … 布局 中 | 
p://mm ma ozrg/ IR/X|| ssqgeiaddeble css (第 2 行 ) 图 


color: #EFEFEF:; 
x 1id #DDDDDD: 







































































奖品 《 》 三 |-| 控制 人 | ar | CSS 前 本 DOK 网 络 
&a | 1 a‘“div.scrollable_demo “ div.items “ div#scrollable“« 











demo_htals ( 御 了 行 ) | 
in: 97 





Paddins: 8 
| 加 | | 


08B1I4 00000000 
上 代码 前 面 的 “+” 号 ， 可 以 将 代码 展开 。 展 开 代码 如 图 B-15 所 示 。 





























jm 
I 
HH | 

















当 第 1 次 单 击 向 右 的 按钮 后 ， 会 出 现 图 B-16 所 示 的 效果 。 
通过 上 图 可 以 看 出 ，HTML 碍 看 器 会 将 页 面 上 改变 的 内 容 也 记录 下 来 ， 并 以 黄色 高 亮 标 记 。 有 了 这 
能 ， 网 页 的 暗箱 操作 将 彻底 成 为 历史 。 笔 者 经 常 利用 该 功能 查看 其 他 网 站 的 动画 效果 是 如 何 实现 的 。 

































































个 功 


400000000000 


在 右 侧 的 样式 面板 中 ， 展 示 了 此 元 素 当 前 所 有 的 样式 。 所 有 样式 都 可 以 实时 地 禁用 以 及 修改 ， 
如 图 B-17 所 示 。 通 过 在 “padding:10px 8px” 前 单 击 就 可 以 禁用 此 规则 ， 通 过 直接 在 样式 上 value 
值 上 单 击 就 可 以 修改 。 
单 击 “布局 ”面板 即 可 看 到 此 元 素 具 体 的 布局 属性 ， 这 是 一 个 标准 的 盒 模型 。 通 过 “布局 ”面板 ， 


看 


可 以 很 容易 地 看 到 元 素 的 偏 移 量 、 外 边 距 、 边 框 、 内 边 距 和 元 素 的 高 度 、 宽 度 等 信息 ， 如 图 B-18 所 示 。 
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340 


四 <div id= scrollable > 
ta class= prev”href= “9 ></a> 
罩 人 div class="itens” strle="overflow: hidden; position- relat 
日 <div class="scroliable_ deso” strle="position: absolute; 
<ay1¢/ay 
tay2¢/ay 
《ay>3</a> 
<a>4</ay 
《ay 5¢/ay 
《<a>6</a> 
ay7 t/ay 
<ay 8¢/ay 
《ay>9<ja> 
《<a> 10¢/a> 
ay 11</ay 
<a> 12¢/a> 
<ay 13¢/a> 
《ay 14¢/a> 
ay15¢/ay 
/divy 
br clear="all”> 
ddivy 
ta class= "next” href="#">¢/ay 


四 <bodyy 
Bdiv style=“asargin:0 auto:width-500px: “> 
div id=“scrollable“> 
a class="prev” href="#">¢/ay 
《div class="itens” style=’overflow: hidden; position- relative; 
wisibility: visible; width: 478px;”> 


0 6815 00000 

















日 


<a> 1</a> 
《<a72《/ay> 
a 3¢/ay 
Ca 4¢/a> 


0816 0000000 





div,. iten |; 
4DOCTIPE html PUBLIC “-//W3C//DID XHINL 1.0 Transitional//EN” “htti 
里 《htal xmlns="http://wew. w3. org/1999/xhtel”> 
《<head> 
四 《body> 
罩 《div strle="sargin:0 suto:width:500px: “> 
a class= prev”href- 3 ></a> 
日 《div class="itess”st7yle= "overflow- hidden; 
position: relative; visibility: visible; width:- 
478px: "> 
<div class="scrollable_ demo” strle=’position: 
absolute; width: 200000em; left: -96px;"> 


Zs tr lo 


#scrollable { 
backeround-color: #EFEFEF- 
border: ipx solid #DDDDDD: 








height: 65px; 
} 
De 
sersin: 合 
@ padding: 0: 
|| } 


0617 0“00"000000000000000 


5000 DOMOODO 


单 击 “DOM” 面 板 后 可 以 看 到 此 元 素 的 详细 的 DOM 信息 以 及 函数 和 事件 ， 如 图 B-19 所 示 。 


布局 ~ 





全 可 型 尺寸 基准 : content-box 


a O00°0000000 
0000000000 








accessKey 

accessKeyLabel “Alt+Shift+” 
contextMenu nu 

dataset DOMStrineMap { 
isContentEditable false 
onmouseenter nu 
onmouseleave nu 


onmozfullscreenerror nul 


outerHTML “div id=”scrollab 
href=“#“><fayvn </ 
parentElement div 
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B.2.3 CSSU DOMDODOODODO 





这 3 个 面板 相对 于 前 面 2 个 面板 比较 次 要 ，CSS 和 DOM 面板 与 HTML 面板 中 右 侧 的 面板 功 
能 相似 ， 但 不 如 HTML 面板 灵活 ， 因 此 一 般 使 用 得 很 少 。 


CSS 面板 特有 的 一 个 功能 就 是 可 以 分 别 详细 查看 页 面 中 内 骨 以 及 动态 导入 的 样式 。 例 如 
firebug6.html， 可 以 在 Firebug 中 看 到 图 B-20 所 示 的 效果 。 


单 击 CSS 面板 后 就 可 以 分 别 查 看 相应 的 样式 。 此 处 展示 的 样式 都 是 经 过 格式 化 的 ， 适 合 于 学 习 
CSS 的 代码 格式 和 规范 。 


而 在 网 络 面 板 中 ， 相 对 有 一 些 强大 的 功能 。 例 如 打开 Google 网 站 中 国 首 页 ，Firebug 显示 效果 
如 图 B-21 所 示 。 
















































































着 《 2》 三 | "| 控制 台 HI 了 L |CSSv | 了 避 二 DOK 网络 
CSS 源 代码 编辑 -| firebug6. html "| 
div test { ,isa | [输入 任意 字符 也 寺 沪 列表 


solid 
sargin: 20px localhost/flB-firebug/ 

1 w firebugb. html 

.test span 【 localhost/flB-firebug/css/ 
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color: green 
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该 页 面 可 以 监视 每 一 项 元 素 的 加 载 情况 , 包括 脚本 ， 图 片 等 的 大 小 以 及 加 载 用 时 等 ， 对 于 页 面 
优化 有 着 极其 重要 的 意义 。 


此 外 顶部 还 可 以 分 类 查看 元 素 的 HTML、CSS、JS 等 的 加 载 情况 ， 使 分 析 更 加 灵活 。 


























B.2.4 0000 












脚本 面板 不 仅 可 以 查看 页 面 内 的 脚本 , 而 ” 尝 守 《>| 
到 还 有 强大 的 调试 功能 。 肌 ， 所 有 - firebug7. html - Cb 了 RF 


四 Se 必 
在 脚本 面板 的 右 侧 有 “监控 ”、“ 堆 栈 ” 和。 写 | 

“ 断 点 ”3 个 面板 ,利用 Firebug 提供 的 设置 断 5， 所 

点 的 功能 , 可 以 很 方便 的 调试 程序 。 如 图 B-22 :2 


| <divy Eo 
所 示 。 0 B82 00000003000 





















































pt Debugging with Firebug</title> 
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000 jQueryD 0 2 


100000 


例如 firebug7.html， 其 HTML 代码 如 下 : 





<DOCTYBER Em WSEAADIDRXI Me ON ansm enalAAeN 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml” > 
<head> 
<title>Javascript Debugging with Firebug</title> 
<script type="text/javascript"> 
function doSomething(){ 
var 1b1 = document .getElementById( messageLabel ) 
1bl1.innerHTML = "I just did something.": 








} 
</script> 
</head> 
<body> 

<div> 


<div id="messageLabel"></div> 


<input type="button" value="Click Me!” onclick="doSomething();" /> 


</div> 
</body> 
</html> 


运行 代码 后 可 以 看 到 图 B-23 所 示 的 效果 。 图 中 加 粗 


























首 有 颜色 的 行 号 表示 此 处 为 JavaScript 代码 ， 可 以 在 此 未 
处 设置 断 点 。 


比如 ， 我 们 在 第 7 行 这 名 代码 前 面 单 击 一 下 ， 那 么 
它 前面 就 会 出 现 一 个 红 褐 色 的 原点 ， 表 示 此 处 已 经 被 设 
置 了 断 点 。 此 时 ， 在 右 侧 断 点 面板 中 的 断 点 列表 中 ， 就 


























































































































入 太 国 国 轴 和 的 风 记 


Ie 控制 台 HI 了 CSS | 脚本 ~ 


所 有 -| 人 rebug7.html ~ CPan 
《1DOCTYPE htal PUBLIC “~//W3C//DID XHTML 1.0 Transitional/ 
《htaml xmlns="http://wew. w3. org/1999/xhtml” > 

head> 
《title7Javascript Debugeing wh Firebug</title> 
《script trpe="text/javascript”> 
function doSonething() { 
var lbl = document. getElenentBrId( =essageLabel ) 
1bl. innerHTML = “I just did something. ”; 





} 
+ 


/script> 


























出 现 了 刚才 设置 的 断 点 。 如 果 想 暂时 禁用 某 个 断 点 ， 可 
以 在 断 点 列表 中 去 掉 某 个 断 点 前 面 的 复 选 框 里 的 钩 ， 那 







































































D623 0000 


么 此 时 左 侧面 板 中 相应 的 断 点 就 从 红 褐 色 变 成 了 红 灰 神色 。 如 图 B-24 所 示 。 


















































IEEG7> 






leyJavascript Debugginge with Firebugdtitle> 
cript type= “text/ javascril ipt “> 


Tm 











6 function doSomething ( 
@ 工 var ibl = document ed 

8 1bl. innerHTML = “I1 just did something.” 
9 } | 
1 cript 

head> 

《body> 
divy 加 | 


三 脚本 ~ | DO 网 络 加 
有 所有- firebug7.html - GP 写 局 他 | 监控 堆栈 | 断 点 ~ | 
| 《!DoCTYPE htal PUBLIC ”~//W3C//DID XHTML 1.0 Transitional// 困 || 回 dosomething firebug7. 
2| 《htal xmlns="http://ww. w3.org/1999/xhtml” > | Et = et 








DB-24 0000 





设置 完 断 点 后 ， 我 们 就 可 以 开始 调试 程序 了 。 单 击 页 面 
停止 在 用 淡 黄 色 底 色 标 出 的 那 一 行 上 。 此 时 月 


























显示 效果 如 图 





B-25 所 示 。 








mm 





















































B Firebug 


中 的 “Click Me!” 按 钮 ， 可 以 看 到 脚本 





目 鼠 标 移动 到 某 个 变量 上 即 可 显示 此 时 这 个 变量 的 值 。 





此 时 JavaScript 内 容 上 方 的 站 至 豆 近 这 4 个 按钮 已 经 变 得 可 用 了 。 它 们 分 别 代表 “继续 执行 和 





~ 
和 
































2 
9 
9 
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单 步 进入 ”“ 单 步 跳 过 ”和 “ 单 步 退出 ” 


继续 执行 <F8>: 当 通 过 断 点 来 停止 执行 脚本 时 ， 单 击 <F8> 则 会 恢复 执行 脚本 。 
单 步 进入 <F11>: 允许 跳 到 页 面 中 的 其 他 函数 内 部 。 
单 步 跳 过 <F10>: 单 击 <F10> 来 直接 跳 过 函数 的 调用 即 跳 到 return 之 后 。 
单 步 退 出 <ShifttF11>: 允许 恢复 脚本 的 执行 ， 直 到 下 一 个 断 点 为 止 。 


o 








白 














im 














击 第 2 个 按钮 “ 单 步 进入 ”代码 会 跳 到 下 


行 。 显 示 效 果 如 





图 B-26 所 示 。 





5 《script trpe= tezt/ javazscript 》 

funetion dosomethine O{ 
var lbl - docunent. getElenantB71d( messagalabol’ ); 
TRT nme jmsf did snnething ™: 


vo 
wn 





3 1 
DO xfscript> 


5 
10 1 人 /seript> 


5 Function doSomethinel]T 
全 71 var 1bl = document. getElementById( messageLabel’ ); 
8 1bl. inmerHINL = “I just did something. ”; 


| divimessageLabel 








0 6-25 00000 
从 上 图 可 以 看 到 ， 当 鼠标 移动 到 变量 


99 


“div# messageLabel”。 














00 


“lbl” 上 时 ， 就 可 以 显示 出 它 的 内 容 是 一 个 DOM 元 素 即 











此 时 将 右 侧 
个 变量 ， 包 H 
就 可 以 看 到 详 


200000 




































































“this” 的 指向 以 及 “lbl” 的 变量 。 
信息。 显示 效果 如 图 B-27 所 示 。 


掉 板 切换 到 “监控 ”面板 ， 这 里 列 出 了 几 


单 击 EE 





例如 firebug8.html， 其 HTML 代码 如 下 : 


<lDOCTYPE htmlV PUBETCG =//WSCA/ADTD XHTME 10 

"http://www.w3.org/TR/xhtml1/DTD/xhtm 
<html xmlns="http://www.w3.org/1999/xhtml” > 
<head> 


<title>Javascript Debugging with Firebug</tit 


<script type="text/javascript"> 
//<![LCDATAL 
function doSomething(){ 





Transitional//EN" 





0 B-26 0000 























1-transitional .dtd"> 


var 1b1 = document.getElementById('messagelabel'): 


SS Wl 2 
jon (evar a namesy 
1b1.innerHTML+=arr+"<br />" 


监控 ~ | 堆栈。 断 点 
新 建 监 控 表 达 式 

由 this Window firebus7. html 
arguments 列 

由 Ibl divfamesssageLabel 
tostring function() 

由 窗口 Window firebus7. html 

0 B27 “DO 
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WE 
=/Serint> 
</head> 
<body> 
<div> 


<div id="messageLabel"></div> 


=impuB ye uon valve a Glnek Me onelek doomevhing 


</div> 
</body> 
</html> 











在 “lblinnerHTML+=arr+"<br>"” 这 行 代码 前 





掉 的 序号 上 单 击 鼠标 右键 ， 就 可 以 出 现 设置 条 件 
































断 点 的 输入 框 。 在 该 框 内 输入 “arr==5”， 然 后 按 回 车 键 确 认 ， 显 示 效 果 如 图 B-28 所 示 。 




















1bl. innerHINL+=arrt" <br />" 


1 








0 B28 000000 
最 后 单 击 页 面 中 的 “Click Me!” 按钮。 可 以 发 现 ， 脚 本 在 “arr==5” 这 个 表达 式 为 真 时 停 上 了 ， 





























因此 “5” 以 及 之 后 的 数字 没有 显示 到 页 面 

















果 的 对 比 。 


CANARYVNPO 


D0 8-29 0000 


欧 j000 


10000 











中 。 图 








B-29 和 B-30 是 正常 效果 和 设置 条 件 断 点 后 的 效 








必 ID 乡情 


08- 30 0000000000 




















按 <F12> 键 可 以 快速 开局 Firebug ， 如 果 想 要 获取 完整 的 快捷 键 列 表 ， 可 以 访问 
http://getfirebug.com/wiki/index.php/Keyboard_and_ Mouse_Shortcuts。 


2000 





如 果 安 装 过 程 中 遇 到 了 困难 ， 可 以 查看 Firebug 的 Q&A， 网 址 为 http://getfirebug.com/wiki/index.php/FAQ。 
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30 Firebug 口 0 






































Firebug 除了 本 身 强 大 的 功能 之 外 ， 还 有 基于 Firebug 的 插件 ， 它 们 用 于 扩充 Firebug 的 功能 。 


比如 Google 公司 开发 Page Speed 插件 ， 开 发 人 员 可 以 使 用 它 来 评估 他 们 网 页 的 性 能 









































， 并 获得 有 








关 如 何 改 进 性 能 的 建议 。Yahoo 公司 开发 的 用 于 检测 页 面 整体 性 能 的 YSlow 和 用 于 调试 PHP 的 
FirePHP。 还 有 用 于 调试 Cookie 的 Firecookie 等 。 














-+ fh 


























通过 本 节 的 学 习 ， 读 者 可 以 掌握 Firebug 的 基本 功能 ， 并 且 能 对 以 后 的 学 习 和 工作 


帮助 。Firebug 已 经 逐渐 成 为 




















提供 一 定 的 





个 调试 平台 ， 而 不 仅仅 是 一 个 简单 的 Firefox 的 扩展 插件 。 
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XMLHttpRequest 对 象 是 Ajax 的 核心 ， 它 有 许多 的 属性 、 方 法 和 事 们 


NDC AIax0O XMLHttpRequest 


UUDUD 





UUDUD 
































F 以 便于 脚本 处 理 和 控制 





HTTP 的 请 求 与 响应 。 下 面 是 关于 XMLHttpRequest 对 象 的 一 些 属性 和 方法 的 介绍 。 


10 ready9StateD DO 


当 一 个 XMLHttpRequest 对 象 被 创建 后 ，readyState 属性 标识 了 当前 对 象 了 
的 访问 ， 来 判断 此 次 请 求 的 状态 然后 做 日 
值 代表 的 意义 如 表 C-1 所 示 。 


口 








可 以 通过 对 该 属 怕 




















相应 的 操作 。readyState 属 怕 


E 处 于 什么 状态 ， 
E 具 体 的 


wy 


































































































表 C-1 readyState 属性 
值 说 明 
0 未 初始 化 状态 : 此 时 ， 已 经 创建 了 一 个 XMLHttpRequest 对 象 ， 但 是 还 没有 初始 化 
1 准备 发 送 状 态 : 此 时 ， 已 经 调用 了 XMLHttpRequest 对 象 的 open() 方 法 ， 并 且 XMLHttp Request 对 象 
已 经 准备 好 将 一 个 请 求 发 送 到 服务 器 端 
2 已 发 送 状态 : 此 时 ， 已 经 通过 send0 方 法 把 一 个 请 求 发 送 到 服务 器 端 ， 但 是 还 没有 收 到 一 个 响应 
3 正在 接收 状态 ， 此 时 ， 己 经 接收 到 HTTP 响应 头 部 信息 ， 但 是 消息 体 部 分 还 没有 完全 接收 到 
4 完成 响应 状态 : 此 时 ， 已 经 完成 了 HttpResponse 响应 的 接收 








20 responseText[ 口 


re 


客户 庙 
完整 的 响应 信 





sponseText 





还 未 完成 的 响 
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Eo 


应 





属性 包含 客 
2 时 ，responseText 属性 包含 





| 











SLL 
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2 了 





接收 到 的 HITP 响应 的 文本 内 容 。 当 readyState 








30 responseXxMLDD 





口 
/AN\ 


果 是 回 











传 的 XML 文档 弓 


有 当 readyState 属 | 
或 者 application/xml) 时 


EB 
于 
Py 





| ， 该 








性 值 为 4， 并 上 


个 空 字符 串 ， 当 readyState 属性 值 为 3〈 正 在 接收 ) 时 ， 
言 息 ; 当 readyState 属性 值 为 4〈 已 加 载 ) 时 ， 该 responseText 
























































性 才 会 有 值 并 且 被 解析 为 一 个 XML 文档 ， 和 否则 该 



































吉 构 不 民 


或 者 未 完成 响应 回 传 ， 该 属 愧 














属性 值 为 0、1 或 
响应 中 包含 
属性 才 包 含 





响应 头 部 的 Content-Type 的 MIME 类 型 被 指定 为 XML (text/xml 





属性 值 为 null。 如 


FE 值 也 会 为 null。 由 此 可 见 ，responseXML 





C AjaxD xMLHttpRequestU0000000 





























属性 用 来 描述 被 XMLHttpRequest 解析 后 的 XML 文档 的 属性 。 














el 














40] status 口 口 














status 属性 描述 了 HTTP 状态 代码 。 注 意 ， 仅 当 readyState 属性 值 为 3 〈 正 在 接收 中 ) 或 4 (已 
加 载 ) 时 ， 才 能 对 此 属性 进行 访问 。 如 果 在 readyState 属性 值 小 于 3 时 ， 试 图 存 取 status 属性 值 ， 


将 引发 一 个 异常 。 


















































50 statusText[ 口 
































statusText 属性 描述 了 HTTP 状态 代码 文本 ， 并 且 仅 当 readyState 属性 值 为 3 或 4 时 才 可 用 。 
当 readyState 属性 为 其 他 值 时 试图 存 取 statusText 属性 值 将 引发 一 个 异常 。 
























































60 onreadystatechange 口 口 


每 当 readyState 属性 值 发 生 改变 时 ， 就 会 触发 onreadystatechange 事件 。 一 般 都 通过 该 事件 来 
触发 回 传 处 理 函 数 。 











70 openO0 0 














XMLHttpRequest 对 象 是 通过 调用 open (method，uri，async，username，password) 方法 来 进 
行 初始 化 工作 的 。 调 用 该 方法 将 得 到 一 个 可 以 用 来 进行 发 送 (send() 方 法 ) 的 对 象 。open() 方 法 有 
5 个 参数 。 


(1) method 参数 是 必须 提供 的 ， 用 于 指定 用 来 发 送 请 求 的 HTTP 方法 (GET，POST，PUT， 
DELETE 或 HEAD)。 按 照 HTTP 规范 ， 该 参数 要 大 写 。 

(2) uri 参数 用 于 指定 XMLHttpRequest 对 象 把 请 求 发 送 到 的 服务 器 相应 的 URI, 该 地 址 会 被 自 
动 解析 为 绝对 地 址 。 

(3 ) async 参数 用 于 指定 是 否 请 求 是 异步 的 ， 其 默认 值 为 tue。 如 果 需 要 发 送 一 个 同步 请 求 ， 需 
要 把 该 参数 设置 为 false。 


























































































































(4) 如 果 需 要 服务 器 验证 访问 用 户 的 情况 ， 那 么 可 以 设置 username 以 及 password 这 两 个 参数 。 























80 send()0 口 


调用 open0 方 法 后 ， 就 可 以 通过 调用 send() 方 法 按照 open() 方 法 设 定 的 参数 将 请 求 进行 发 送 。 当 
open() 方 法 中 async 参数 为 true 时 ， 在 send() 方 法 调用 后 立即 返回 ， 否 则 将 会 中 断 直 到 请 求 返回 。 需 
要 注意 的 是 ，send() 方 法 必须 在 readyState 属性 值 为 1 时 ， 即 调用 open0 方 法 以 后 才能 调用 。 在 调用 
send0 方 法 以 后 到 接收 到 响应 信息 之 前 ，readyState 属性 的 值 将 被 设 为 2; 一 旦 接收 到 响应 消息 ， 
readyState 属性 值 将 会 被 设 为 3; 直到 响应 接收 完成 ，readyState 属性 的 值 才 会 被 设 为 4。 


send() 方 法 使 用 一 个 可 选 的 参数 ， 该 参数 可 以 包含 可 变 类 型 的 数据 。 用 户 可 以 使 用 它 并 通过 
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POST 方法 把 数据 发 送 到 服务 器 。 另 外 ， 可 以 显 式 地 使 用 null 参数 调用 send0 方 法 ， 这 与 不 用 参数 
调用 该 方法 一 样 。 对 于 大 多 数 其 他 的 数据 类 型 ， 在 调用 send0 方 法 之 前 ， 应 该 使 用 setRequestHeader() 
方法 先 设 置 Content-Type 头 部 。 如 果 send (data) 方法 中 的 data 参数 的 类 型 为 DOMString， 那 么 ， 
数据 将 被 编码 为 UTF-8。 如 果 数 据 是 Document 类 型 ， 那 么 将 使 用 由 data.xmlEncoding 指定 的 编码 
串 行 化 该 数据 。 


































































































90 abort() 吕 口 




















该 方法 可 以 暂停 一 个 HttpRequest 的 请 求 发 送 或 者 HttpResponse 的 接收 ， 并 日 将 XMLHttp Request 
对 和 象 设置 为 初始 化 状态 。 


100 setRequestHeader()0 口 





























该 方法 用 来 设置 请 求 的 头 部 信息 。 当 readyState 属性 值 为 1 时 ， 可 以 在 调用 open() 方 法 后 调用 
这 个 方法 ; 否则 将 得 到 一 个 异常 。setRequestHeader (header, value) 方法 包含 两 个 参数 : 前 一 个 是 
header 键 名 称 ， 后 一 个 是 键 值 。 


















































110 getResponseHeader()0D 口 























此 方法 用 于 检索 响应 的 头 部 值 ， 仅 当 readyState 属性 值 是 3 或 4《〈 即 在 响应 头 部 可 用 以 后 ) 时 ， 
才 可 以 调用 这 个 方法 ; 和 否则， 该 方法 返回 一 个 空 字 符 串 。 此 外 还 可 以 通过 getAllResponse Headers() 
方法 获取 所 有 的 HttpResponse 的 头 部 信息 。 




































































DDO D jQuery $.ajax()DDD 
DUDDO 































































































































































































参数 名 称 类 型 说 明 
人 和 内 容 类 型 发 送 请 求 头 , 告诉 服务 器 什么 样 的 响应 会 接受 返回 。 如 果 accepts 设置 需要 
了 | 修改 ， 推 荐 在 $.ajaxSetup0 方 法 中 做 一 次 
默认 设置 下 (默认 为 true)， 所 有 请 求 均 为 异步 请 求 。 
5 Boolean 如 果 需 要 发 送 同步 请 求 ， 请 将 此 选项 设置 为 false。 跨 域 请 求 和 dataType: "jsonp" 请 求 
不 支持 同步 操作 。 注 意 ， 同 步 请 求 将 锁 住 浏览 器 ， 用 户 其 它 操 作 必 须 等 待 请 求 完成 才 
可 以 执行 
发 送 请 求 前 可 修改 XMLHttpRequest 对 象 的 函数 ， 例 如 添加 自 定义 HTTP 头 。 在 
beforeSend 中 如 果 返 回 false 可 以 取消 本 次 Ajax 请 求 。XMLHttp Request 对 象 是 惟一 的 
beforeSendO Bnetion function (XMLHttpRequest) { 
this: /0D UO00 Ajax0 O00000 options00 
} 
在 jQuery 1.5，beforeSend 选项 将 被 访问 ， 不 管 请 求 的 类 型 
默认 为 true 〈 当 dataType 为 "script" 和 "jsonp" 时 ， 则 默认 为 false)。 
cache Boolean ee ee i 
设置 为 false 将 不 会 从 浏览 器 缓存 中 加 载 请 求 信息 
请 求 完成 后 回调 函数 (请 求 成 功 或 失败 时 均 调用 )。 
参数 : XMLHttpRequest 对 象 和 一 个 描述 成 功 请 求 类 型 的 字符 串 。 
function (XMLHttpRequest, textStatus) { 
complete() Function _ 
this: /0D UO00 Ajax0 O00000 optionsDDD 
} 
在 jQuery 1.5，complete 设置 可 以 接受 一 个 函数 的 数组 
一 个 以 "{ 字 符 串 :正则 表达 式 }" 配 对 的 对 象 ， 用 来 确定 jQuery 将 如 何 解析 响应 ， 给 定 其 
contents Map 交 尖 刑 
内 容 类 型 
ete Strin 当 发 送信 息 至 服务 器 时 ， 内 容 编 码 类 型 默认 为 “application/x-www-form- urlencoded”。 
外 8 | 该 默认 值 适合 大 多 数 应 用 场合 
这 个 对 象 用 于 设置 Ajax 相关 回调 函数 的 上 下 文 。 也 就 是 说 , 让 回调 函数 内 this 指向 这 
context Object 个 对 象 ( 如 果 不 设 定 这 个 参数 ， 那 么 this 就 指向 调用 本 次 AJAX 请 求 时 传递 的 options 























参数 ) 


























参数 名 称 类 型 说 ” 明 
c 一 个 数据 类 型 对 数据 类 型 转换 器 的 对 象 。 每 个 转换 器 的 值 是 一 个 函数 ， 返 回 相 应 的 转 
onverters Map 
化 值 
同 域 请 求 为 false, 跨 域 请 求 为 hue。 如果 你 想 强 制 跨 域 请 求 (如 JSONP 形式 ) 同一 域 
crossDomain St Et J 
设置 crossDomain 为 true 
发 送 到 服务 器 的 数据 。 
Object | 如 果 不 是 字符 串 ， 将 自动 转换 为 字符 串 格式 。GET 请 求 中 将 附加 在 URL 后 。 想 要 防 
或 止 这 种 自动 转换 ， 可 以 查看 processData 选项 。 








对 象 必 须 为 Key/Value 格式 ， 例 如 {fool :"barl", foo2 : "bar2"} 转 换 为 
&fool = barl&foo2 = bar2。 如 果 是 数组 ，jQuery 将 自动 为 不 同 值 对 应 同一 个 名 称 。 例 
如 {ffoo:["barl", "bar2"]} 转 换 为 &foo=barl&foo=bar2 


String 


























给 Ajax 返回 的 原始 数据 进行 预 处 理 的 函数 。 

提供 data 和 type 两 个 参数 。data 是 Ajax 返回 的 原始 数据 , type 是 调用 jQuery.ajax 
时 提供 的 dataType 参数 。 函 数 返 回 的 值 将 由 jQuery 进一步 处 理 。 

dataFilter() Function function (data, type) { 

0000000 

return data; 






























































预期 服务 器 返回 的 数据 类 型 。 

如 果 不 指定 ,jQuery 将 自动 根据 HTTP 包 MIME 信息 返回 responseXML 或 responseText， 
并 作为 回调 函数 参数 传递 。 
可 用 的 类 型 如 下 。 

xml: 返回 XML 文档 ， 可 用 jQuery 处 理 。 

html: 返回 纯 文本 HTML 信息 ， 包 含 的 script 标签 会 在 插入 DOM 时 执行 。 

script: 返回 纯 文 本 JavaScript 代码 。 不 会 自动 缓存 结果 。 除 非 设置 了 cache 参数 。 注意 ， 
在 远程 请 求 时 不 在 同一 个 域 下 )， 所 有 POST 请 求 都 将 转 为 GET 请 求 。 

json: 返回 JSON 数据 。 
jsonp: JSONP 格式 。 使 用 JSONP 形式 调用 函数 时 ， 例 如 myurl?callback=?,jQuery 将 
动 替换 后 一 个 “? ”为 正确 的 函数 名 ， 以 执行 回调 函数 。 

text: 返回 纯 文 本 字符 串 





























EN 





















































dataType String 






















































































请 求 失败 时 被 调用 的 函数 。 这 个 函数 有 3 个 参数 ， 即 XMLHttpRequest 对 象 、 错 误 
信息 和 捕获 的 错误 对 象 可 选 )。 

function (XMLHttpRequest, textStatus, errorThrown) { 

Bror Function 00OD00D0 textstatus 0 errorThown 

000000000 

this: /0D UO00 Ajax0 O0000D0 options00 

















i 








是 否 触 发 全 局 Ajax 事件 ， 默 认为 true。 
global Boolean 设置 为 false 将 不 会 触发 全 局 Ajax 事件 ， 例 如 ajaxStart 和 ajaxStop 等 可 用 于 控制 各 种 
Ajax 事件 
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参数 名 称 

















D jQuery $.ajax0 UO0D0000 





说 明 





Headers 


Map 


一 个 额外 的 "{ 键 : 值 }" 对 映射 到 请 求 一 起 发 送 。 此 设置 被 设置 之 前 beforeSend 函数 被 调 
; 因此 ， 消 息 头 中 的 值 设 置 可 以 在 覆盖 beforeSend 函数 范围 内 的 任何 设置 






























































ifModified 


Boolean 


默认 : false 
仅 在 服务 器 数据 改变 时 获取 新 数据 。 使 用 HTTP 包 Last-Modified 头 信息 判断 。 在 jQuery 
1.4 中 ， 它 也 会 检查 服务 器 指定 的 'etag' 来 确定 数据 没有 被 修改 过 









































IsLocal 


Boolean 








ym 











允许 当前 环境 被 认定 为 “本 地 ”( 如 文件 系统 )， 即 使 jQuery 默认 情况 下 不 会 承认 它 。 
外 下 协议 目前 公认 为 本 地 : file, *-extension， 和 widget。 如 果 isLocal 设置 需要 修改 ， 
建议 在 $.ajaxSetup() 方 法 中 做 























jsonp 


String 











| 

















在 一 个 jsonp 请 求 中 重 写 回调 函数 的 名 字 。 这 个 值 用 来 奉 代 在 "callback=?" 这 种 GET 或 
POST 请 求 中 URL 参数 里 的 "callback" 部 分 ， 比 如 {jsonp:onJsonPLoad'} 会 导致 将 "onJsonPLoad=?" 
传 给 服务 器 。 在 jQuery 1.5, 设置 jsonp 选项 为 false 阻止 了 jQuery 从 加 入 "?callback" 
字符 串 的 URL 或 试图 使 用 "=2" 转 换 。 在 这 种 情况 下 ， 你 也 应 该 明确 设置 jsonpCallback 
设置 。 例 如 : { jsonp: false, jsonpCallback: "callbackName" } 












































jsonpCallback 


String， 
Function 























为 jsonp 请 求 指定 一 个 回调 函数 名 。 这 个 值 将 用 来 取代 jQuery 自动 生成 的 随机 函数 名 。 

要 用 来 让 jQuery 生成 度 独 特 的 函数 名 ， 这样 管理 请 求 更 容易 ， 也 能 方便 地 提供 回 
调 函 数 和 错误 处 理 。 你 也 可 以 在 想 让 浏览 器 缓存 GET 请 求 的 时 候 ， 指 定 这 个 回调 函数 
名 。 在 jQuery 1.5， 你 也 可 以 使 用 一 个 函数 值 该 设置 ， 在 这 种 情况 下 jsonpCallback 的 


pe 


值 设置 到 该 函数 的 返回 值 











































































































mimeType 


String 

















一 个 mime 类 型 用 来 覆盖 XHR 的 MIME 类 型 








password 


String 




















| 于 响应 HTTP 访问 认证 请 求 的 密码 








processData 


Boolean 















































默认 为 tue。 默 认 情 况 下 ， 发 送 的 数据 将 被 转换 为 对 象 〈 从 技术 角度 来 讲 并 非 字符 串 ) 
以 配合 默认 内 容 类 型 “application/x-www-form-urlencoded”。 如 果 要 发 送 DOM 树 信息 
者 其 他 不 希望 转换 的 信息 ， 请 设置 为 false 

















ScriptCharset 


String 








只 有 当 请 求 时 dataType 为 “jsonp” 或 者 “script”， 并 且 type 是 GET 时 才 会 用 于 强制 
修改 字符 集 (charset)。 通 常 在 本 地 和 远程 的 内 容 编码 不 同时 使 月 






































二 





statusCode 


Map 

















一 组 数值 的 HTTP 代码 和 函数 对 象 ， 当 响应 时 调用 了 相应 的 代码 。 例 如 ， 如 果 响 应 状 
态 是 404， 将 触发 以 下 警报 : 
$.ajax({ 

statusCode: {404: function() { 

alert('page not found'): 

} 
有 > 
如 果 请 求 成 功 ， 状 态 代码 函数 作为 回调 的 成 功 相 同 的 参数 ， 如 果 在 一 个 错误 的 结果 ， 
他 们 采取 了 相同 的 参数 error 回调 




















success() 


Function 


请 求 成 功 后 的 回调 函数 。 这 个 函数 传递 3 个 参数 : 从 服务 器 返回 的 数据 ， 并 根据 
dataType 参数 进行 处 理 后 的 数据 ， 一 个 描述 状态 的 字符 串 ; 还 有 jqXHR 对 象 


























timeout 


Number 








设置 请 求 超时 时 间 《〈 毫 秒 )。 
此 设置 将 覆盖 $.ajaxSetup() 方 法 的 全 局 设置 





traditional 





Boolean 


























如 果 你 想 要 用 传统 的 方式 来 序列 化 数据 ， 那 么 就 设置 为 tue。 请 参考 工具 分 类 下 面 的 
jQuery.param 方法 
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参数 名 称 类 型 说 明 
i 请 求 方式 (POST 或 GET)， 默 认为 GET。 
e trin 
. | 注意 ， 其 他 HTTP 请 求 方法 ， 例 如 PUT 和 DELETE 也 可 以 使 用 ， 但 仅 部 分 浏览 器 支持 
url String 发 送 请 求 的 地 址 ， 默 认为 当前 页 地 址 
username String 于 响应 HTTP 访问 认证 请 求 的 用 户 名 
he ti 可 调 创建 XMLHttpRequest 对 象 。 当 可 用 时 默认 为 ActiveXObject (IE〉 中 ， 耕 则 为 
XMLHttpRequest 
二 一 对 “文件 名 -文件 值 ”在 本 机 设置 XHR 对 象 。 例 如 ， 如 果 需 要 的 话 ， 你 可 以 用 它 来 
xhrFields Map 











设置 withCredentials 为 true 的 跨 域 请 求 


UUE JQueryUDOO000 XML 





ES 


XML (eXtensible Markup Language) 即 可 扩展 标记 语言 ， 与 HTML 一 样 ， 都 是 属于 SGML 标准 
通用 语言 。 在 XML 中 ， 采 用 了 如 下 语法 。 


(1) 任何 起 始 标签 都 必须 有 一 个 结束 标签 。 
(2) 可 以 采用 另 一 种 简化 语法 ， 即 在 一 个 标签 中 同时 表示 起 始 和 结束 标签 。 这 种 语法 是 在 右边 闭 
合 尖 括号 之 前 紧 跟 一 个 斜 线 (/)， 例 如 <tag/>。XML 解析 器 会 将 其 翻译 成 <tag></tag>。 


(3) 标签 必须 按照 合理 的 顺序 进行 欢 套 ， 因 此 结束 标签 必须 按 镜像 顺序 匹配 起 始 标签 ， 例 如 
<b> this is a <i>sample</i> string</b>。 这 相当 于 将 起 始 和 结束 标签 看 作 是 数学 中 的 左右 括号 ， 在 没 
有 关闭 所 有 的 内 部 括号 之 前 ， 不 能 关闭 外 面 的 括号 。 


(4) 所 有 的 属性 都 需要 有 值 ， 并 且 和 需要 在 值 的 周围 加 上 双 引 号 。 


ES Sv 
很 多 悍 


青 况 下 XML 文件 不 能 正常 解析 都 是 由 于 Content-Type 没有 设置 好 。 如 果 Content- Type 本 
身 就 是 一 个 XML 文件 则 不 需要 设置 ， 如果 是 由 后 台 程 序 动态 生成 的 ， 那 么 就 需要 设置 Content-Type 
为 “text/xml”， 否则 jQuery 会 以 默认 的 “textbhtml” 方 式 处 理 ， 导 致 解析 失败 。 以 下 是 几 种 常见 语 
言 中 设置 Content-Type 的 方式 。 



































































































































J 





































































































header("Content-Type:text/xml"); /PH 
response.ContentType="text/xml” //ASP 
response. setContentType("text/xml"): 人 SP 


ES #0 0 


作为 一 个 标准 的 XML， 必须 要 遵循 严格 的 格式 规定 ， 其 
封闭 的 。 例 如 如 下 代码 就 是 错误 的 ， 因 为 它 并 没有 闭合 。 




















EE 要 的 一 条 规则 就 是 XML 必须 是 





池 
[bd 
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000jouev00 200 


<?xm]l version="1.0" encoding="UTF-8"?> 
<name>zhangsan 














另外 XML 文档 只 能 有 一 个 顶层 元 素 。 例 如 以 下 代码 就 是 错误 的 ， 








<?xml] version="1.0" encoding="UTF-8"?> 
<name>zhangsan</name> 

<id>1</id> 

<name>1isi</name> 

<id>2</id> 


个 正确 的 XML 应 该 是 下 面 这 样 的 形式 。 



































<?xml] version="1.0" encoding="UTF-8"?> 
<stulist> 
<student emails 161.com'> 
<name>zhangsan</name> 
<id>1</id> 
</student> 
<student email="2@2.com"> 
<name>1isi</name> 
<id>2</id> 
</student> 
SS 


x li 办 次 


利用 上 面 提 到 的 正确 的 XML， 通 过 jQuery 的 Ajax 函 




















$.ajax({ 
UA a 
type: 'GET', 
dataType: 'xml', 
timeout: 1000, oa alan 
cache: false, WA 
error: function(xml){ 
oe ML 
和 
success: function(xml){ 
光 加 加 加 轩 办 汪 


je 





这 样 就 可 以 很 容易 地 从 后 合 读 取 到 一 段 XML， 当 然 也 可 以 用 简 











函数 进行 读 取 ， 


原因 是 它 有 多 个 顶层 元 素 。 





jQuery 代码 如 下 : 

















的 $.get0 方 法 和 $.post0 方 法 





E jQuery 0 0 DO XML 

















来 去 获取 。 代 码 如 下 : 


$.get( "ajax.xml ,function(Cxm]){ 
VA a XM 
Doe 


E00 wx 


解析 XML 文档 与 解析 DOM 一 样 ， 也 可 以 用 find0、children0 等 函数 来 解析 和 用 each0 方 法 来 
进行 般 历 ， 另 外 也 可 以 用 text0 和 attr0 方 法 来 获取 节点 文本 和 属性 。 例 如 在 success 回调 里 解析 XML 。 
代码 如 下 : 









































success: function(xml){ 
$(xml).find("student").each(function(i){ //DO0D studentDDODOD 


var id=$(this).children("id"): po aa ig 

vapeianvalueslun exe pd oa 
alert(id value): VA 
alert($(this).attr("email")); //D0000 studentDD emil00 
1 





通过 上 面 的 代码 ， 能 成 功 获取 到 相应 的 数据 。 接 下 来 就 可 以 将 解析 出 来 的 数据 添加 到 已 有 的 
HTML 文件 中 。 通 常 可 以 先生 成 一 个 DOM 元 素 片 段 ， 然 后 将 数据 用 appendTo0 函 数 添加 进 这 个 元 
素 片 段 中 ， 最 后 将 这 个 片段 添加 进 HTML 文档 中 。success 回调 代码 如 下 : 





























success: function(xml){ 


var frag=$("<ul/>"); GAO a eal 
$(xml).find("student").each(function(i){ DODOD student [00 
varWid=$(this) ehildrem( id Ys i 
id_value=id. text(); a 
email=$(this).attr("email"); //D DO studentDOD email0D 


pa ol md a aa (oa evar A (ON a oa a a a oN 
ragrappendG I ivaluen remade /0 
[DE 
frag.appendTo( "#10ad"): san an (nia ol ee gl (0 be oh io gl 





























在 项 目 中 经 常会 遇 到 一 个 问题 ， 即 数据 已 经 更 新 了 ， 但 传递 的 还 是 以 前 的 数据 。 要 避免 这 种 情 
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况 ， 就 应 当 禁 用 缓存 。 禁 用 绥 存 的 方式 有 很 多 种 。 如 果 是 通过 $.post0 方 法 获取 的 数据 ， 那 么 默认 就 是 
禁用 缓存 的 。 如 果 是 用 了 $.get0 方 法 ， 可 以 通过 设置 时 间 戳 来 避免 缓 在。 可 以 在 URL 的 后 面 加 上 
+(+new Date)， 人 代码 如 下 : 



















































































$.get( ajax.xml? +(+new Date) ,function(xml){ 
/a 

Ds 

// (+new Date)D DODD new Date().getTime() 


之 所 以 不 用 随机 数 ， 是 因为 随机 数 对 于 同一 台电 脑 来 说 ， 在 大 量 使 用 之 后 出 现 重 复 的 概率 会 很 大 ， 
而 用 时 间 截 则 不 会 出 现 这 种 情况 。 

















































































































此 外 ， 如 果 使 用 了 $.ajax() 方 法 来 获取 数据 ， 只 需要 设置 cache:false 即 可 。 但 要 注意 ，false 是 布 
尔 值 而 不 是 一 个 字符 串 ， 在 这 一 点 上 初学 者 很 容易 犯错 。 





























掌握 了 以 上 内 容 后 ， 读 者 就 可 以 顺利 地 写 出 符合 XML 语法 规范 并 能 正确 解析 的 XML 文件 了 。 
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相国 门 访 / 
Validation 插件 有 两 个 经 常 被 用 到 的 选项 ， 分 别 是 方法 (method)〉 和 规则 (rule)。 


(1) 方法 。 验 证 方法 就 是 通过 执行 验证 逻辑 判断 一 个 元 素 是 否 合法 。 例 如 email0 方 法 就 是 检 
查 当 前 文本 格式 是 否 是 正确 的 E-mail 格式 。 读 者 能 很 方便 地 利用 Validation 插件 提供 的 方法 来 完成 
验证 。 另 外 ， 读 者 也 可 以 自 定 义 方 法 。 


(2) 规则 。 验 证 规则 将 元 素 和 元 素 的 验证 方法 关联 起 来 ,例如 验证 一 个 需要 E-mail 格式 和 必 
























































































































































填 的 属性 name 为 email 的 元 素 ， 可 以 定义 该 元 素 的 规则 如 下 : 
email: { 
required: true, 
email: true 
} 
加 插件 方法 如 表 上 -1 所 示 。 
表 F-1 插件 方法 
名 称 返回 类 型 说 明 
validate( options ) Validator 验证 被 选择 的 form 
valid( ) Boolean 检查 被 选择 的 from 或 者 被 选择 的 所 有 元 素 是 否 有 效 
rules( ) Options 为 第 1 个 被 选择 的 元 素 返回 验证 规则 
rules( "add", rules ) Options 增加 指定 的 验证 规则 并 为 第 1 个 匹配 元 素 返 回 所 有 的 规则 
rules( "remove", rules ) Options 移 除 指定 的 验证 规则 并 为 第 1 个 匹配 元 素 返 回 所 有 的 规则 
removeAttrs( attributes ) Options 从 第 1 个 匹配 元 素 中 移 除 指定 的 属性 并 返回 
加 ”内置 验 证 规则 如 表 F-2 所 示 。 
表 F-2 内 置 验证 规则 
名 称 返回 类 型 说 明 
required( ) Boolean 使 元 素 总 是 必须 的 











required(dependency-expression) Boolean 根据 给 定 的 表达 式 结果 ， 判 断 元 素 是 否 是 必须 的 
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9 Validator 























名 称 返回 类 型 说 明 
required( dependency-callback ) Boolean 根据 给 定 的 回调 函数 的 返回 值 ， 判 断 元 素 是 否 是 必须 的 
remote( url ) Boolean 使 用 请 求 资源 检查 元 素 的 有 效 性 
minlength( length ) Boolean 要 求 元 素 满足 给 定 的 最 小 长 度 规 则 
maxlength( length ) Boolean 要 求 元 素 满足 给 定 的 最 大 长 度 规则 
rangelength( range ) Boolean 要 求 元 素 满足 给 定 的 长 度 范围 规则 
min( value ) Boolean 要 求 元 素 满足 给 定 的 最 小 值 规则 
max( value ) Boolean 要 求 元 素 满足 给 定 的 最 大 值 规则 
range( range ) Boolean 要 求 元 素 满足 给 定 值 的 范围 规则 
email( ) Boolean 要 求 元 素 满足 E-mail 格式 规 见 
url( ) Boolean 要 求 元 素 满足 url 格式 规 见 
date( ) Boolean 要 求 元 素 满足 date 格式 规则 
dateISO( ) Boolean 要 求 元 素 满足 ISO date 格式 规则 
dateDE( ) Boolean 要 求 元 素 满 足 german date 格式 规则 
number( ) Boolean 要 求 元 素 满 足 带 小 数 点 的 数字 格式 规则 
numberDE() Boolean 要 求 元 素 满足 german format 并 带 小 数 点 的 数字 格式 规则 
digits( ) Boolean 要 求 元 素 满足 整 型 格式 规则 
creditcard( ) Boolean 要 求 元 素 满足 信用 卡号 码 格式 规则 
accept( extension ) Boolean 要 求 元 素 满足 特定 的 文件 格式 
equalTo( other ) Boolean 要 求 元 素 等 于 另外 一 个 元 素 
phoneUS() Boolean 要 求 元 素 满足 美国 电话 号 码 的 格式 规则 





Validation 验证 会 返回 一 个 Validator 对 象 ，validator 对 象 可 以 帮助 用 户 触发 validation 程序 或 者 
改变 form 的 内 容 。validator 对 象 更 多 的 方法 如 表 F-3 所 示 。 









































表 F-3 validator 对 象 的 方法 
名 称 返回 类 型 说 明 
form( ) Boolean 验证 form， 如 果 验 证 合法 则 返回 true， 和 否则 返回 false 
element( element ) Boolean 验证 一 个 元 素 ， 如 果 验 证 合法 则 返回 tue， 否 则 返回 false 



































validator 对 象 中 的 静态 方法 如 表 F-4 所 示 。 


resetForm( ) undefined 复位 被 验证 的 form 
showErrors(errors ) undefined 显示 指定 的 提示 信息 
numberOfInvalids() Integer 返回 无 效 字段 的 个 数 
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表 F-4 validator 对 象 中 的 静态 方法 
名 称 返回 类 型 说 明 

setDefaults( defaults ) undefined 修改 validation 初始 的 设置 
增加 一 个 新 的 validation 方法 。 该 方法 必须 由 name (必须 是 一 

addMethod( name, method, message ) undefined 个 合法 的 JavaScript 标识 符 )、 一 个 基于 函数 的 JavaScript 和 
一 个 默认 的 字符 串 提 示 信 息 组 成 

addClassRules(name, rules ) undefined 增加 一 个 验证 规则 ， 它 代替 了 “rules” 中 的 验证 

addClassRules( rules ) undefined 增加 多 个 验证 规 见 




















加 ”实用 项 




















表 F-5 实用 项 
名 称 返回 类 型 说 明 
jQueryvalidatorformat(template, argument argumentN... ) String 使 用 参数 来 蔡 换 {fn} 占 位 符 





















































表 F-6 普通 选择 器 
名 称 返回 类 型 说 明 
:blank Array<Element> 多 配 值 为 空 的 元 素 
:filled Array <Element> 玉 配 值 不 为 空 的 元 素 
:unchecked Array <Element> 匹配 所 有 没 被 选择 的 元 素 


ES ep 0 0 wv 


(1) Form 插件 API 
Form 插件 拥有 很 多 方法 ， 这 些 方法 可 以 使 用 户 很 容易 地 管理 表单 数据 和 提交 表单 。 
























































9 ajaxForm() 

















增加 所 需要 的 事件 监听 器 ， 为 Ajax 提交 表单 做 好 准备 。AjaxForm0 方 法 并 没有 提交 表单 ， 而 是 
在 $(document).ready0 方 法 中 ， 使 用 ajaxForm0 方 法 来 为 Ajax 提交 表单 做 好 准备 。ajaxForm 方法 可 以 接 
受 0 个 或 1 个 参数 。 单 个 的 参数 既 可 以 是 一 个 回调 函数 ， 也 可 以 是 一 个 Options 对 象 。 此 方法 可 以 


进行 链 式 操作 。 
例子 : 


$('#myFormId' ).ajaxForm(): 


























9 ajaxSubmit() 
立即 通过 Ajax 方式 提交 表单 。 在 大 多 数 情况 下 ， 都 是 调用 ajaxSubmit0 方 法 来 响应 用 户 的 提交 
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表单 操作 。AjaxSubmit0 方 法 可 以 接受 0 个 或 1 个 参数 。 单 个 的 参数 既 可 以 是 一 个 回 





是 一 个 Options 对 象 。 此 方法 可 以 进行 链 式 操作 。 
例子 : 


VE 
$('#myFormId').submit(function() { 
训导 轩辕 
$(this).ajaxSsubmit(): 
光量 轩 false 
return false: 


DO 





9 


formSerialize() 


该 方法 将 表 
格式 化 好 的 字符 串 ， 格 式 如 下 : 


























namel=valuel&name2=value2 














寻 为 返回 的 是 字符 串 ， 而 不 是 jQuery 对 象 ， 所 以 该 方法 不 能 进行 链 式 操作 。 
列子 : 








var queryString = $('#myFormId').formSerialize(); 
Oe os a A 
$.post('myscript.php', queryString , function(data){ }); 


9 fieldSerialize() 


调 函 数 ， 也 可 以 





单 中 所 有 的 元 素 串 行 化 〈 序 列 化 ) 为 一 个 字符 串 。formSerialize() 方 法 会 返回 一 个 











fieldSerialize0 方 法 将 表单 的 字段 元 素 串 行 化 〈 序 列 化 ) 成 一 个 字符 串 。 当 用 户 








单 的 一 部 分 时 就 可 以 用 到 该 方法 了 。fieldSerialize0) 方 法 会 返回 一 个 格式 化 后 的 字符 串 ， 


namel=valuel&name2=value2 
为 返回 的 是 字符 串 ， 所 以 该 方法 不 可 以 进行 链 式 操作 。 
| 子 : 








大 














及 





var queryString = $('#myFormId .SpecialFields' ).fieldSerialize(); 
//D id0 myFormIdD O00 classD specialFields000000 


9 fieldValue() 


fieldvalue() 方 法 把 匹配 元 素 的 值 插入 到 数组 中 ， 然 后 返回 











只 需要 串 行 化 表 
格式 如 下 : 








这 个 数组 。 从 0.91 版 本 起 ， 该 方法 


总 是 以 数组 的 形式 返回 数据 ， 如 果 元 素 值 被 判定 无 效 ， 则 数组 为 空 ， 否 则 数组 将 包含 一 个 或 多 个 
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元 素 值 。fieldValue() 方 法 返回 一 个 数组 ， 因 此 不 可 以 进行 链 式 操作 。 
例子 : 


oa al a ol 
var value = $('#myFormId :password').fieldValue(): 
Ge I vane 











9 resetForm() 














Th 














该 方法 通过 调用 表单 元 素 原 有 的 DOM 方法 习 
链 式 操作 。 


例子 : 


置 表单 到 初始 状态 。resetForm() 方 法 可 以 进行 


























$('#myFormId').resetForm():; 


9 clearForm() 






































clearForm() 方 法 用 来 清空 表单 中 的 元 素 。 该 方法 将 所 有 的 文本 框 (text)、 密 码 框 (password) 
和 文本 域 (textarea) 元 素 置 空 ， 清 除 下 拉 框 〈select) 元 素 的 选 定 以 及 将 所 有 的 单 选 按钮 radio ) 
和 多 选 按钮 (checkbox) 重 置 为 非 选 定 状 态 。clearForm() 方 法 可 以 进行 链 式 操作 。 


例子 : 









































$('#myFormId').clearForm():; 


9 clearFields() 























clearFields() 方 法 用 来 清空 字段 元 素 。 当 用 户 需 要 清空 一 部 分 表单 元 素 时 就 会 用 到 该 方法 。 
clearFields() 方 法 可 以 进行 链 式 操作 。 


例子 : 








$( 加 yFormId .specialFields').clearFields(): 
//D idD0 myFormId0D O00 classD specialFieldsDDDODD 


(2) ajaxForm and ajaxSubmit 的 Options 对 象 


ajaxForm(O 方 法 和 ajaxSubmit0 方 法 文 持 许多 选项 ， 这 些 选 项 都 可 以 通过 Options 对 象 来 设置 。 
Options 对 象 是 一 个 简单 的 JavaScript 对 象 ， 包 含 了 如 下 属性 与 值 的 集合 。 


























9 target 


指明 页 面 中 根据 服务 器 响应 进行 更 新 的 元 素 。 这 个 值 可 能 是 一 个 特殊 的 jQuery 选择 器 字符 串 、 
一 个 jQuery 对 象 或 者 一 个 DOM 元 素 。 
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默认 值 : null。 

















9 ul 
将 表单 元 素 提 交 到 指定 的 url 中 。 
默认 值 ， 表 单 action 属性 的 值 。 


























9 type 





指定 提交 表单 数据 的 方法 (method): GET 或 POST。 
默认 值 : 表单 method 属性 的 值 (如 果 没 有 找到 ， 则 为 GET)。 


9 “beforeSubmit 





























表单 提交 前 的 回调 函数 。beforeSubmit 回调 函数 被 用 来 运行 预 提交 逻辑 或 者 校 验 表 单数 据 。 假 








如 beforeSubmit 回调 函数 返回 false， 则 表单 将 不 会 被 提交 。beforeSubmit 回调 函数 有 3 





























个 参数 : 数 


组 形式 的 表单 数据 、jQuery 表单 对 象 和 传递 给 ajaxForm() 方 法 或 ajaxSubmitO 方 法 的 Options 对 象 。 





表单 数据 数组 遵循 以 下 数据 格式 (json 类 型 )。 


beforeSubmit: function(arr, $form, options) { 
// The array of form data takes the following form: 
// [{name: 'username', value:'jresig'}, {name:'password' ,value: 'secret' } ] 
// return false to cancel submit 


默认 值 : null。 




















9 success 


表单 成 功 提交 后 调用 的 回调 函数 。 假 如 success 回调 函数 被 指定 ， 将 在 服务 器 返回 


























响应 后 被 调 





用 。success 函数 可 以 传 回 responseText 或 者 responseXML 的 值 (决定 值 的 数据 类 型 是 dataType 


选项 ) 


默认 值 : null。 




















9 dataType 











期 望 的 服务 器 响应 的 数据 类 型 ， 可 以 是 null、xml、script 或 者 json。dataType 提供 了 指定 的 方 

















法 以 便 控制 服务 器 的 响应 。 这 个 指定 的 方法 将 被 直接 地 反映 到 jQueryhttpData() 方 法 ， 
文 持 以 下 格式 。 


> xml。 如 果 dataType 被 指定 为 xml， 服 务 器 返回 内 容 将 被 作为 XML 来 对 待 。 
“success” 回 调 函 数 被 指定 ，responseXML 的 值 将 会 传递 给 回调 函数 。 























。dataType 




















同时 ， 如 果 
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> json。 如 果 dataType 被 指定 为 json， 服 务 器 返回 内 容 将 被 执行 ， 如 果 “success” 回 调 函 数 
被 指定 ， 返 回 的 内 容 将 会 传递 给 回调 函数 。 


> ”script。 如 果 dataType 被 指定 为 script， 服 务 器 返回 内 容 将 被 放 在 全 局 环境 中 执行 。 
默认 值 : null。 






































9 semantic 


是 否 需要 定义 为 严格 的 语义 格式 。 注 意 ， 普 通 的 表单 序列 化 要 遵循 的 语义 不 能 包括 type 属性 
为 image 的 input 元素。 假如 服务 器 有 严格 的 语义 要 求 ， 而 表单 也 至 少 包含 一 个 type="image" 元 素 
的 时 候 ， 那 么 必须 设置 semantic 选项 为 true。 


默认 值 : false。 





















































9 resetForm 
表单 是 否 在 提交 成 功 后 被 重 置 。 
默认 值 : null。 


























© clearForm 
表单 是 否 在 提交 成 功 后 被 清空 。 
默认 值 : null。 























9 iframe 
表单 是 否 总 是 将 服务 器 响应 指 同 到 一 个 iframe。iframe 在 文件 上 传 时 会 很 有 用 。 
默认 值 : false。 



































9 data 


含 额 外 数据 的 对 象 通过 form 形式 提交 。 





data: { keyl: 'valuel', key2: “Value2 } 
© error 
错误 时 的 回调 函数 。 
9 beforeSerialize 


函数 被 调用 前 被 序列 化 。 它 可 以 在 调用 之 前 检索 其 值 的 形式 。 它 带 有 两 个 参数 : form 对 
象 和 oa ajaxSubmit 传递 过 来 的 options 对 象 。 





3 





























以 
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beforeSerialize: function($form, options) { 
// return false to cancel submit 


} 





默认 值 : null。 

















9 replaceTarget 





可 选 ， 与 target 选项 一 起 使 用 。 如 果 想 将 目标 元 素 一 起 替换 掉 ， 请 设 为 tue， 如 果 只 想 替 换 











标 元 素 的 内 容 ， 则 设 为 false。 


默认 值 : false。 在 v2.43 后 增加 。 


























9 iframeSrc 











字符 串 值 ， 当 /如 果 使 用 iframe 时 作为 iframe 的 src 属 














默认 值 : about:blank 


网 页 使 用 https 协议 时 默认 值 为 : ja 



































9 forceSync 










































































型 
Es 


vascript:false 


布尔 值 ， 当 上 传 文件 (或 使 用 过 ame 选项 ) 时 ， 提 交 表 单 前 为 了 消除 短 延 迟 ， 设 置 为 true。 延 
迟 的 使 用 是 为 了 让 浏览 器 泻 染 DOM 更 新 前 执行 原 有 的 表单 submit。 这 时 显示 一 条 信息 告知 用 户 ， 























如 :“ 请 稍 等 …” 会 改善 可 用 性 。 
默认 值 : false。 在 v2.38 后 增加 。 























9 uploadProgress 
上 传 进 度 信 息 《〈 如 果 浏 览 器 文 持 ) 


1) event: 浏览 器 事件 











2) position: 位 置 〈 整 数 ) 


3) total: 总 长 度 〈 整 数 ) 



































回调 函数 。 回 调 传递 以 下 参数 : 


4) percentComplete: 完成 度 〈 整 数 ) 


默认 值 : null 




















9 iframeTarget 





























使 用 iframe 元 素 作为 响应 文件 上 传 目 标 。 默 认 情 况 下 ， 该 插件 将 创建 一 个 临时 的 这 ame 元 素 
来 捕捉 上 传 文件 时 的 反应 。 此 选项 允许 您 使 用 现 有 的 这 ame， 如 果 你 想 。 使 
































El 





昌 此 选项 时 ， 插 件 对 来 

















自 服务 器 的 响应 不 作 任何 处 理 。 

















默认 值 : null。 在 v2.76 后 增加 。 














(3) Form 插件 实例 


训 加 加 轩 加 加 轩 
Var Options 
target:  '#divTioUpdate', 
Wo comment .php', 
success: function() { 
etl | Oa 


//D ajaxForm()0 O000 options0 0 


$('#myForm' ).ajaxForm(options): 


dy 

















提供 的 options 对 象 ， 那 么 可 以 利 月 





方法 。 


主意 ,利用 此 Options 对 象 ， 可 以 将 值 传 给 jQuery 的 $.ajax0 方 法 。 假如 用 户 熟 悉 $.ajax0 方 法 
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API 的 官方 网 站 地 址 为 : http://www.ericmmartin.com/projects/simplemodal/ 





表 F-7 
名 称 
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日 它们 来 将 Options 对 象 传 递 给 ajaxForm() 方 法 和 ajaxSubmit() 


SimpleModal 插件 的 API 


功能 说 明 





appendTo [String:'body'] 


将 弹出 框 添加 到 的 父 容器 ， 参 数 为 css 选择 器 








focus [Boolean:true] 














把 焦点 保持 在 模 态 窗口 上 







































































opacity [Number:50] 设置 overlay div 的 不 透明 度 ，1-100 
overlayId [String:'simplemodal-overlay'] 违 罩 层 ID 

overlayCss [Object:{ }] 定义 遮 置 层 样 式 

containerId [String:'simplemodal-container] 弹出 模 态 窗口 容器 ID 

containerCss [Object 人 ] 弹出 模 态 窗口 容器 样式 

datald [String:'simplemodal-data'] 内 容 层 的 ID 





dataCss [Object:{ }] 





内 容 层 的 样式 





minHeight [Number:null] 


container 的 最 小 高 度 





minWidth [Number:null] 


container 的 最 小 宽度 





maxHeight [Number:null] 





container 的 最 大 高 度 
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名 称 


功能 说 明 





maxWidth [Number:null] 


container 的 最 大 宽度 





autoResize [Boolean:false] 








是 否 自 适 应 大 小 。 当 








小 心 ， 因 为 它 可 能 会 发 生 不 可 预知 的 效果 











window 调整 大 小 时 自动 调整 container 的 大 小 ， 使 用 时 需 














autoPosition [Boolean:true] 





是 否 自动 定位 





zIndex [Number: 1000] 




















模 态 窗口 的 z-index 











close [Boolean:true] 























如 果 为 true， 那 么 closeHTML，escClose，overClose 将 被 使 用 ， 反 之 则 不 使 用 





closeHTML [String:"] 








定义 关闭 按钮 





closeClass [String:'simplemodal-close'] 














定义 关闭 按钮 的 样 


式 





escClose [Boolean:true] 

















是 否 允 许 按 ESC 关闭 模 态 窗 




















overlayClose [Boolean:false] 


是 否 允 许 点 击 overlay( 遮 田 



































二) 关闭 模 态 窗 





position [Array:null] 








定义 弹出 窗 体位 置 

















， 数 组 [top, left] 





persist [Boolean:false] 











是 否 跨 模 态 调用 的 数据 。 仅 
态 调用 时 保持 不 变 ， 如 果 为 











日 于 现 有 的 DOM 元素 。 如 果 为 tue， 数 据 在 跨 模 
false， 数 据 将 被 恢复 到 其 原始 状态 








modal [Boolean:true] 






































如 果 为 true， 用户 将 无 法 与 模 态 窗口 下 面 的 内 容 进行 交互 。 如 果 为 false， 遮 团 












































层 将 被 禁用 ， 允 许 用 户 与 下 面 的 内 容 交 互 













































































onOpen [Function:null] 模 态 窗口 打开 时 候 的 回调 函数 
onShow [Function:null] 模 态 窗口 显示 时 候 的 回调 函数 
onClose [Function:null] 模 态 窗口 关闭 时 候 的 回调 函数 


区 :me00 wx 





























API 的 官方 网 站 地 址 为 : https://github.com/carhartl/jquery-cookie 





加 写 入 Cookie。 


$000net We eo .ne vale 让 





注意 : “the cookie” 为 待 写 入 的 Cookie 名 ,， “the_value” 为 待 写 入 的 值 。 





名” 读 取 Cookie。 


seoo nama 





注意 : “the_cookie” 为 待 读 取 的 Cookie 名 。 





加 ”删除 Cookie。 


DOF 00 API 


sonnel me one nn 





注意 : “the_cookie” 为 Cookie 名 ,设置 为 null 即 删 除 此 Cookie。 必 须 使 用 与 之 前 设置 时 相同 的 路 
径 (path ) 和 域名 ( domain )， 才 可 以 正确 删除 Cookie。 





图 其 他 可 选 参数 。 


$.cookie('the cookie ， the value’, { 
expires: 7, 
pathe.e 
domain: 'jquery.com', 
Seeunen ue 





注意 : ，expires: (Number|Date ) 有 效 期 。 可 以 设置 一 个 整数 作为 有 效 期 (单位 : 天 )， 也 可 以 直 
接 设 置 一 个 日 期 对 象 作为 Cookie 的 过 期 日 期 。 如 果 指 定 日 期 为 负数 ， 例 如 已 经 过 去 的 日 子 ， 
那么 此 Cookie 将 被 删除 ; 如 果 不 设置 或 者 设置 为 null， 那 么 此 Cookie 将 被 当 作 Session Cookie 
处 理 ， 并 且 在 浏览 器 关闭 后 删除 。 


| path: (String ) cookie 的 路 径 属性 。 默 认 是 创建 该 Cookie 的 页 面 路 径 。 
| domain: ( String ) cookie 的 域名 属性 。 上 默认 是 创建 该 Cookie 的 页 面 域名 。 


i secure: (Boolean ) 如 果 设 为 tue， 那 么 此 Cookie 的 传输 会 要 求 一 个 安全 协议 ， 例 如 HTTPS。 
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分 类 方法 名 称 说 明 返回 值 
jQuery(expression, 该 函数 接收 一 个 包含 CSS 选择 器 的 字符 串 ， 然 后 用 这 个 字符 串 ; 
[context]) 去 匹配 一 组 元 素 ey 
jQuery(html,[owner 根据 提供 的 原始 HTML 标记 字符 串 ， 动 态 创建 由 jQuery 对 象 包 : 
Document]) 装 的 DOM 元 素 jQuery 

核心 jQuery(elements) 将 一 个 或 多 个 DOM 元 素 转化 为 jQuery 对 象 jQuery 

函数 | jQuery(callback) jQuery(document).ready0) 的 简写 jQuery 
jQuery.holdReady( hold ) | 暂停 或 恢复 .ready( 事件 的 执行 Boolean 
jQuery.sub() 可 创建 一 个 新 的 jQuery 副本 ， 不 影响 原 有 的 jQuery 对 象 jQuery 
和 ce 调 函 数 , 延迟 对 象 通常 ee 
证 ee 运行 该 函数 将 变量 jQuery 和 $ 的 控制 权 都 让 渡 给 原始 的 拥有 者 Object 
each(callback) 以 每 一 个 匹配 的 元 素 作为 上 下 文 来 执行 一 个 函数 jQuery 
length / size() jQuery 对 象 中 元 素 的 个 数 Number 
selector 返回 选择 此 元 素 的 选择 器 (用 于 插件 开发 ) String 
Sontext 返 元 素 的 时 此 元 素 所 在 的 DOM 节点 内 容 (用 于 插件 ht 
eq(position) 取得 元 素 组 中 某 个 位 置 的 元 素 jQuery 

0 getO 取得 所 有 匹配 的 DOM 元 素 集合 Array<Element> 
get(index) 在 所 有 匹配 的 DOM 元 素 集合 中 取得 其 中 一 个 匹配 的 元 素 Element 
index(subject) 搜索 与 参数 表示 的 对 象 匹 配 的 元 素 ， 并 返回 相应 元 素 的 索引 值 Number 
jQuery.error( str ) 接受 一 个 字符 串 ， 并 抛 出 包含 这 个 字符 串 的 异常 
jQuery.pushStack( eleme | 将 一 个 DOM 元 素 集合 加 入 到 jQuery 栈 jQuery 


nts, [name, arguments] ) 




















.toArray( ) 返回 一 个 包含 jQuery 对 象 集合 中 的 所 有 DOM 元 素 的 数组 Array 
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续 表 
分 类 方法 名 称 说 明 返 回 值 
插件 | jQuery fnexiend (object) 2 0 元 素 ， 来 提供 新 的 方法 〈 可 用 来 制造 一 个 典型 jQuery jQuery 
机 制 本 
jQuery.extend(object) 扩展 jQuery 对 象 本 身 ， 可 用 于 将 函数 添加 到 jQuery 命名 空间 中 jQuery 
000 
分 类 方法 名 称 说 明 返 回 值 
#id 根据 给 定 的 id 匹配 相应 元 素 Array <Element> 
element 根据 给 定 的 元 素 名 匹配 相应 元 素 Array<Element(S)> 
基本 .Class 根据 给 定 的 class 匹配 相应 元 素 Array<Element(S)> 
- 匹配 所 有 元 素 〈 主 要 用 于 搜索 全 文 ) Array<Element(S)> 
Selectorl,selector2,selectorN 将 每 一 个 选择 器 匹配 到 的 元 素 合 并 后 一 起 返回 Array<Element(S)> 
ancestor descendant 在 给 定 的 祖先 元 素 下 匹配 所 有 的 后 代 元 素 Array<Element(S)> 
parent>child 在 给 定 的 父 元 素 下 匹配 所 有 的 子 元 素 Array<Element(S)> 
本 prev+next 0 2 next 元 素 。next 元 素 指 Array<Element(S)> 
prev~siblings 匹配 prev 元 素 之 后 的 所 有 同辈 元 素 Array<Element(S)> 
:first 匹配 找到 的 第 1 个 元 素 Array <Element> 
:last 匹配 找到 的 最 后 一 个 元 素 Array <Element> 
:not(selector) 去 除 所 有 与 给 定 选择 器 匹配 的 元 素 Array<Element(S)> 
:even 匹配 所 有 索引 值 为 偶数 的 元 素 ， 从 0 开始 计数 Array<Element(S)> 
:odd 匹配 所 有 索引 值 为 奇数 的 元 素 ， 从 0 开始 计数 Array<Element(S)> 
:eq(index) 匹配 一 个 给 定 索 引 值 的 元 素 Array <Element> 
:gt(index) 匹配 所 有 大 于 给 定 索引 值 的 元 素 Array<Element(S)> 
:lt(index) 匹配 所 有 小 于 给 定 索引 值 的 元 素 Array<Element(S)> 
:header 匹配 如 <hl1>，<h2>，<h3> 之 类 的 标题 元 素 Array<Element(S)> 
:animated 匹配 所 有 正在 执行 动画 的 元 素 Array<Element(S)> 
:focus 选择 当前 获取 焦点 的 元 素 Array<Element(S)> 
:contains(text) 匹配 包含 给 定 文本 的 元 素 Array<Element(S)> 
内 容 过 | :empty 匹配 所 有 不 包含 子 元 素 或 者 文本 的 空 元 素 Array<Element(S)> 
滤器 :has(selector) 匹配 含有 选择 器 所 匹配 的 元 素 的 元 素 Array<Element(S)> 
:parent 匹配 含有 子 元 素 或 者 文本 的 元 素 Array<Element(S)> 
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EE 方法 名 称 说 明 返回 值 
:enabled 匹配 所 有 可 用 元 素 Array<Element(S)> 
四 :disabled 匹配 所 有 不 可 用 元 素 Array<Element(S)> 
表单 过 元 配 所 有 选中 的 元 素 〈 复 选 框 、 单 选 框 等， 不 包括 
滤器 :checked 2 Ee Array<Element(S)> 
<select> 中 的 option ) 
:Selected 匹配 所 有 选中 的 option 元 素 Array<Element(S)> 
匹配 所 有 的 不 可 见 元 素 ， 如 果 <input> 元 素 的 type 
见 过 | :hidden A S > Array<Element(S)> 
， 属性 为 “hidden”， 也 会 被 匹配 到 人 
pes EDT 
:visible 匹配 所 有 的 可 见 元 素 Array<Element(S)> 
[attribute] 匹配 包含 给 定 属性 的 元 素 Array<Element(S)> 
[attribute=value] 匹配 给 定 的 属性 是 某 个 特定 值 的 元 素 Array<Element(S)> 
[attribute!=value] 匹配 给 定 的 属性 是 不 包含 某 个 特定 值 的 元 素 Array<Element(S)> 
[attribute ^=value] 匹配 给 定 的 属性 是 以 某 个 值 开始 的 元 素 Array<Element(S)> 
[attribute$=value] 匹配 给 定 的 属性 是 以 某 个 值 结尾 的 元 素 Array<Element(S)> 
属性 过 | [attribute *=value] 匹配 给 定 的 属性 含有 某 个 值 的 元 素 Array<Element(S)> 
滤器 attributeFilter1l _ 
Do Te en 复合 属性 选择 器 ， 匹 配 同时 符合 多 个 属性 选择 器 的 
[attributeFilter2] a Array<Element(S)> 
. | 所 有 元 素 
[attributeFilterN] 
匹配 给 定 的 属性 等 于 给 定 字符 串 或 以 该 字符 串 为 
ttribute|=val A | Sp Array<El t(S)> 
| 前 级 (该 字符 串 后 跟 一 个 连 字符 “-”) 的 元 素 May ElementS) 
匹配 给 定 的 属性 用 空格 分 隔 的 值 中 包含 一 个 给 定 
[attribute~=value] 正本 定 的 如 性 用 空格 分 隔 的 值 中 包含 ea Array<Element(S)> 
值 的 元 素 。 
nthehildGindewlevenJoddlequati | 匹配 其 父 元 素 下 的 第 N 个 子 元 素 或 奇偶 等 元 素 。 | Aray<Element(S)> 
子 元 素 | :first-child 匹配 所 有 父 元 素 的 第 1 个 子 元 素 Array<Element(S)> 
过 滤器 | :last-child 匹配 所 有 父 元 素 的 最 后 一 个 子 元 素 Array<Element(S)> 
匹配 所 有 父 元 素 的 惟一 一 个 子 元 素 。 如果 某 个 元 素 
:only-child a et a 3 A <El t(S)> 
全 全国 是 父 元 素 中 惟一 的 子 元 素 ， 则 将 会 被 匹配 7 
兄 西 月 <1i > rea>、< > 和 < > 
下 配 所 input textarea select> 和 <button Array<Element(S)> 
元 系 
:text 匹配 所 有 单行 文本 框 Array<Element(S)> 
:password 匹配 所 有 密码 框 Array<Element(S)> 
:Tadio 匹配 所 有 单 选 按 名 Array<Element(S)> 
:checkbox 匹配 所 有 复 选 杠 Array<Element(S)> 
表单 ”| :submit 匹配 所 有 提交 按 名 Array<Element(S)> 
:image 匹配 所 有 图 像 域 Array<Element(S)> 
:reset 几 配 所 有 重 置 按 外 Array<Element(S)> 
:button 匹配 所 有 按 铂 Array<Element(S)> 
:file 匹配 所 有 文件 域 Array<Element(S)> 
元 配 所 有 不 可 见 元 素 ， 为 “hidden> 让 
:hidden 严 配 所 有 不可 见 元 素 ， 包 括 type 为 “hidden” 的 Array<Element(S)> 








<input/> 元 素 
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分 类 方法 名 称 说 明 返回 值 
atrr(name) 取得 第 1 个 匹配 元 素 的 属性 值 String 
atrr(properties) 将 一 个 “名 / 值 ”形式 的 对 象 设置 为 所 有 匹配 元 素 的 属性 jQuery 
attr(key,value) 为 所 有 匹配 的 元 素 设置 一 个 属性 值 jQuery 

属性 attr(key,fn) 为 所 有 匹配 的 元 素 设置 一 个 计算 的 属性 值 jQuery 
removeAttr(name) 从 每 一 个 匹配 的 元 素 中 删除 一 个 属性 jQuery 
prop(propertyName) 获取 匹配 的 元 素 集中 的 第 一 个 元 素 的 属性 值 。 jQuery 
removeProp(propertyyName) | 为 匹配 的 元 素 删 除 设置 的 属性 jQuery 
addClass(class) 为 每 个 匹配 的 元 素 添 加 指定 的 类 名 jQuery 
nasadstelaay 在 严 配 的 元 素 集合 ， 站 如 果 至 少 有 一 个 元 素 具有 指定 的 class 类 ， Bln 

则 返回 trtue， 耕 则 返回 false 
类 roriovoc lds elasel 从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 类 ， 多 个 类 名 之 间 用 空 ii 
分 开 。 如 果 不 指定 类 名 ， 则 删除 全 部 的 类 
toggleClass(class) 如 果 存 在 〈 不 存在 ) 就 删除 〈 添 加 ) 一 个 类 jQuery 
toggleClass(class,switch ) 在 switch 为 true 时 添加 一 个 类 的 操作 ， 为 false 时 删除 这 个 类 jQuery 
ee html() 取得 第 1 个 匹配 元 素 的 html 内 容 ， 该 函数 不 能 用 于 XML 文档 String 
html(val) 设置 每 一 个 匹配 元 素 的 html 内 容 ， 该 函数 不 能 用 于 XML 文档 jQuery 

去 末 text() 取得 所 有 匹配 元 素 的 文本 内 容 String 
text(val) 设置 所 有 匹配 元 素 的 文本 内 容 jQuery 
val| 获得 第 1 个 匹配 元 素 的 当前 值 String,Array 

值 val(val) 设置 每 一 个 匹配 元 素 的 值 jQuery 
val(val) 设置 所 有 的 单 选 按钮 、 复 选 框 和 下 拉 列 表 为 指定 的 值 jQuery 
0 
分 类 方法 名 称 说 明 返回 值 
ed(index) 从 匹配 的 元 素 集合 中 取得 一 个 指定 位 置 的 元 素 ，index 从 0 开始 jQuery 
过 滤 | filter(expr) 筛选 出 与 指定 表达 式 匹 配 的 元 素 集合 jQuery 
filter(fn) 筛选 出 与 指定 函数 返回 值 匹 配 的 元 素 集合 jQuery 
9 在 四 配 的 元 素 集合 中 上 如 果 至 少 有 一 个 元 素 具 有 指定 的 class 类 ， ea 
则 返回 trtue， 否 则 返回 false 

所 个 表达 式 来 检查 当前 选 选择 的 元 素 集合 ， 如 果 其 中 至 少 有 一 个 Boolean 
元 素 符合 给 定 的 表达 式 就 返回 true 
, i a 

map(callback) J 。 | callback 方法 转换 其 值 ， 然 后 jQuery 
not(expr) I 除 与 指定 表达 式 匹 配 的 元 素 jQuery 
slice(start,[end]) 从 匹配 元 素 集 合 中 取得 一 个 子 集 ， 与 内 建 的 数组 的 slice0 方 法 相同 jQuery 
first() 获取 元 素 集合 中 第 一 个 元 素 jQuery 
last() 获取 元 素 集合 中 最 后 一 个 元 素 jQuery 
has() 保留 包含 特定 后 代 的 元 素 ， 去 掉 那 些 不 含有 指定 后 代 的 元 素 jQuery 
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分 类 方法 名 称 说 明 
取得 一 个 包含 匹配 的 元 素 集合 中 每 一 个 元 素 的 所 有 子 元 素 的 
children([expr]) 
closest([expr]) 台 ， 逐 级 向 上 级 元 素 匹 配 ， 并 返回 最 先 匹 配 的 祖先 元 素 
find(expr) 搜索 所 有 与 指定 表达 式 匹 配 的 元 素 
取得 一 个 包含 匹配 的 元 素 集 合 中 每 一 个 元 素 紧邻 的 后 面 同辈 元 
next([expr]) 
得 一 个 包含 也 集合 中 每 一 个 元 素 之 后 能 司 辈 
nextAiitexpaj) 取得 一 个 包含 匹配 的 元 素 集合 中 每 一 个 元 素 后 的 所 有 同 非 元 
offsetParent( ) 素 第 一 个 匹配 的 父 节点 的 定位 〈 仅 对 可 见 元 素 有 效 ) 
parent([expr]) 个 包含 所 有 匹配 元 素 的 惟一 父 元 素 的 元 素 集合 
埋 找 parents([expr]) 含 所 有 匹配 元 素 的 祖先 元 素 的 元 素 集合 (不 包含 根 元 素 ) 
se 个 包含 匹配 的 元 素 集合 中 每 一 个 元 素 紧邻 的 前 一 个 同辈 
BP 元 素 的 元 素 集合 
取得 一 个 包含 匹配 的 元 素 集合 中 每 一 个 元 素 之 前 的 所 有 同辈 元 
prevAll([expr]) ; 
i 包含 匹配 的 元 素 集合 中 每 一 个 元 素 的 所 有 惟一 同辈 元 
siblings([expr]) 
nextUntil([expr]) 当前 元 素 之 后 所 有 的 同辈 元 素 ， 直 到 遇 到 选择 器 匹配 的 
中 但 不 包括 选择 器 匹配 的 元 素 
arentsUntil(fexpr]) 和 前 元 素 的 所 有 的 前 非 元 素 ， 直 到 过 到 选择 器 匹配 的 元 素 
. 但 不 包括 选择 器 匹配 的 元 素 
revUntil(fexpr]) 攻取 每 个 当前 元 素 之 前 所 有 的 同 非 元 素 ， 直 到 过 到 选择 器 匹配 的 
P 上 ， 但 不 包括 选择 器 匹配 的 元 素 
add(expr) 式 匹 配 的 元 素 添 加 到 jQuery 对 象 中 
串联 & | andSelfO 匹配 的 元 素 集合 添 加 到 当前 的 集合 中 
其 它 | end0 的 “破坏 性 ”操作 ， 将 匹配 的 元 素 集合 恢复 到 前 一 个 状态 
contents() 匹配 元 素 集合 元 素 的 子 元 素 ， 包 括 文字 和 注释 节点 
分 类 方法 名 称 说 明 
死 配 的 元 素 内 部 追加 内 容 ， 所 添加 的 内 容 成 为 元 素 的 
append(content) 子 节点 
内 部 “| appendTo(content) 匹配 的 元 素 追 加 到 另 一 个 指定 的 元 素 集合 中 
插入 | 5 配 的 元 素 内 部 前 置 内 容 ， 这 是 向 所 有 匹配 元 素 内 部 
处 插入 内 容 的 最 佳 方式 
prependTo(content) t 配 的 元 素 前 置 到 另 一 个 指定 的 元 素 集 合 中 
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G jQuery000 
续 表 
方法 名 称 说 明 返回 值 
after(content) 甘 每 个 匹配 的 元 素 之 后 插入 内 容 jQuery 
外 部 before(content) 车 每 个 匹配 的 元 素 之 前 插入 内 容 jQuery 
插入 | insertAfter(content) 作 所 有 匹配 的 元 素 插入 到 另 一 个 指定 的 元 素 集合 的 后 jQuery 
insertBefore(content) 各 所 有 匹配 的 元 素 插 入 到 另 一 个 指定 的 元 素 集合 的 前 盏 jQuery 
wrap(html) 各 所 有 匹配 的 元 素 用 其 他 HTML 标记 包 囊 起 来 jQuery 
wrap(elem) 等 所 有 匹配 的 元 素 用 其 他 元 素 包 于 起 来 jQuery 
wrapAll(html) 将 所 有 匹配 的 元 素 用 单个 HTML 标记 包 于 起 来 jQuery 
wrapAll(elem) 各 所 有 匹配 的 元 素 用 单个 元 素 包 囊 起 来 jQuery 
包 于 将 每 一 个 匹配 的 元 素 的 子 内 容 (包括 文本 节点 ) 用 一 个 HTML 绪 : 
wrapInner(html) 构 包 庄 起 来 jQuery 
将 每 一 个 匹配 的 元 素 的 子 内 容 〈 包 括 文本 节点 ) 用 DOM 元 素 包 
wrapInner(elem) 吉 起 来 jQuery 
Ua 将 匹配 元 素 的 父 级 元 素 删 除 ， 保 留 自 身 〈 和 同辈 元 素 ， 如 果 存 在 ) iQuer 
p 在 原来 的 位 置 。 和 wrap0 的 功能 相反 ey 
replaceWith(content) 将 所 有 匹配 的 元 素 替 换 成 指定 的 HTML 或 DOM 元 素 jQuery 
替换 以 指定 的 HTML 或 DOM 元 素来 代替 所 有 匹配 选择 器 的 元 素 。 
replaceAll(selector) 该 方法 与 replaceWith0 方 法 的 作用 相同 ， 只 是 颠倒 了 replaceWithO jQuery 
操作 
empty() | 除 匹 配 的 元 素 集 合 中 所 有 的 子 节点 jQuery 
remove([expr]) 从 DOM 文档 中 删除 所 有 匹配 的 元 素 jQuery 
删除 从 DOM 中 去 掉 所 有 匹配 的 元 素 。detach() 和 remove() 一 样 ， 
detachO) 不 过 detach0) 保 存 了 所 有 jQuery 数据 和 被 移 走 的 元 素 相 关联 。 jouer 
当 需 要 移 走 一 个 元 素 ， 不 久 又 将 该 元 素 插入 DOM 时 ， 这 种 ee 
方法 很 有 用 。 
clone() 复制 匹配 的 DOM 元 素 并 且 选 中 副本 jQuery 
复制 复制 匹配 的 DOM 元 素 以 及 其 所 有 的 事件 处 理 并 且 返 回 这 些 | 
clone(true) = jQuery 
副本 
罗 天 方法 名 称 说 明 返 回 值 
css(name) 获取 匹配 的 第 1 个 元 素 的 样式 属性 String 
CSS | css(name,value) 给 所 有 匹配 的 元 素 的 一 个 样式 属性 设置 值 jQuery 
本 给 所 有 匹配 的 元 素 的 多 个 样式 属性 设置 值 ，proerties 是 一 个 ， 
css(proerties) jQuery 











“名 / 值 ” 对 象 
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分 类 方法 名 称 说 明 返回 值 
offset() 获取 匹配 的 第 1 个 元 素 在 当前 窗口 的 相对 偏 移 Object(top,left) 
设置 匹配 的 元 素 集 合 中 每 个 元 素 的 当前 坐标 ， 相 对 于 文档 . 
offset( coord ) jQuery 
(document) 
offsetParent() 返回 最 近 的 被 定位 过 的 祖先 元 素 。( 祖 先 元 素 指 该 元 素 的 上 级 jQue 
本 元 素 ， 即 包 着 它 的 外 层 元 素 ) 2 
定 们 | position0 获取 一 个 元 素 相对 其 父 元 素 的 相对 仿 移 Objecttoplet) 
ScrollIop(O 获取 匹配 的 第 1 个 元 素 的 滚动 条 距 项 部 的 位 置 Integer 
scrollTop(val) 所 有 匹配 元 素 的 竖 直 滚动 条 都 滚动 到 指定 的 位 置 jQuery 
scrollLeft() 获取 匹配 的 第 1 个 元 素 的 深 动 条 距 左 侧 的 位 置 Integer 
scrollLeft (val) 所 有 匹配 元 素 的 水 平 滚动 条 都 滚动 到 指定 的 位 置 jQuery 
heigth() 获取 匹配 的 第 1 个 元 素 当 前 计算 的 高 度 值 (px) Integer 
heigth(val) 为 每 个 匹配 的 元 素 设 置 高 度 值 jQuery 
width() 获取 匹配 的 第 1 个 元 素 当 前 计算 的 宽度 值 (px) Integer 
width(val) 为 每 个 匹配 的 元 素 设置 宽度 值 jQuery 
2 获取 匹配 的 第 1 个 元 素 的 内 部 高 度 〈 不 包括 border， 但 是 包 
innerHeight() . Integer 
高 宽 括 padding) 
东 取 克 配 的 第 ] 个 元 素 的 内 部 寄 唐 (不 已 各 
innerWidth() 获取 匹配 的 第 1 个 元 素 的 内 部 宽度 (不 包括 border， 但 是 包 Integer 
插 padding 
获取 匹配 的 第 1 个 元 素 的 外 部 高 度 〈 默 
outerHeight([options]) 获取 匹配 1 个 元 素 的 外 部 高 度 〈 默 认 包括 border 和 Integer 
padding) 
于 取 | 故 西 | 的 第 个 元 素 的 部 窗 度 里 
outerWidth([options]) 获 又 下 本 1 个 元 素 的 外 部 宽度 默认 包括 border 和 Integer 
padding) 
分 类 方法 名 称 说 明 返 回 值 
页 二 加 i 
ready(fn) 当 DOM 载 入 就 绪 可 以 查询 及 操纵 时 绑 定 一 个 要 执行 的 函数 jQuery 
bind(type,[data] fn) 为 一 个 中 机 元 素 的 特定 事件 《例如 cick) 绢 定 一 个 事件 处 理 了 数 jQuery 
事件 | unbind([type],[data]) bind() 方 法 的 反 向 操作 ， 从 每 一 个 严 配 的 元 素 中 删除 绑 定 的 事件 jQuery 
绑 定 为 每 一 个 匹配 元 素 的 特定 事件 (例如 click) 绑 定 一 个 一 次 性 | 
one(type,[datal,fn) ES Query 
里 函数 
trigger(type,[data]) 匹配 的 元 素 上 触发 某 类 事件 jQuery 
这 一 特定 方法 会 触发 元 素 上 特定 的 事件 指定 一 个 事件 类 型 )， 
iggerHandler(type.[data]) | 得 不 会 执行 浏览 器 默认 动作 jQuery 
on( events [, selector] [， PR : 工 缉 避 个 起 多 个 击 件 a 3 
op datal, handler) 在 选择 元 素 上 绑 定 一 个 或 多 个 事件 处 理 函数 jQuery 
sm, | off( events [, selector] [, | ts . 
绑 定 | 9 7 selectonl 用 于 移 除 用 .on0 绑 定 的 事件 处 理 程序 jQuery 
delegate( selector, 为 所 有 选择 器 匹配 的 元 素 附加 一 个 或 多 个 事件 处 理 函 数 ， 元 ia 
eventType, handler ) 素 可 以 是 现在 或 将 来 的 元 素 ee 
ndeleeated) 为 当前 选择 器 匹配 的 所 有 元 素 移 除 一 个 事件 处 理 程序 ， 元 素 ioue 
可 以 是 现在 或 将 来 的 元 素 i 
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续 表 
分 类 方法 名 称 说 明 返 回 值 
动态 live( type, fn ) 对 动态 生成 的 元 素 进行 事件 绑 定 jQuery 
事件 | gie( type, fn) 从 元 素 中 删除 先前 用 .live0 绑 定 的 所 有 事件 jQuery 
eo 一 个 模 #5 悬 停 事 件 〈 光 标 移动 到 一 个 对 象 上 面 及 移出 此 对 象 ) 的 jQuery 
方法 
人 每 次 单 击 后 依次 调用 函数 jQuery 
blurO 由 发 每 一 个 匹配 元 素 的 blur 事件 jQuery 
blur(fn) 在 每 一 个 匹配 元 素 的 blur 事件 中 绑 定 一 个 处 理 函 数 jQuery 
change() 中 发 每 个 匹配 元 素 的 change 事件 jQuery 
change(fn) 在 每 一 个 匹配 元 素 的 change 事件 中 绑 定 一 个 处 理 函 数 jQuery 
click() 由 发 每 一 个 匹配 元 素 的 click 事件 jQuery 
click(fn) 在 每 一 个 匹配 元 素 的 click 事件 中 绑 定 一 个 处 理 函 数 jQuery 
dblclick() 申 发 每 一 个 匹配 元 素 的 dbclick 事件 jQuery 
事件 “| dblclick(fn) 在 每 一 个 匹配 元 素 的 dblclick 事件 中 绑 定 一 个 处 理 函 数 jQuery 
交互 “| focus() 出 发 每 一 个 匹配 元 素 的 focus 事件 jQuery 
focus(fn) 在 每 一 个 匹配 元 素 的 focus 事件 中 绑 定 一 个 处 理 函 数 jQuery 
select() 申 发 每 一 个 匹配 元 素 的 select 事件 jQuery 
select(fn) 在 每 一 个 匹配 元 素 的 select 事件 中 绑 定 一 个 处 理 函 数 jQuery 
focusin( handler(eventObj 有 件 函 数 绑 定 到 "focusin” 事件 。 跟 focusO 区 别 在 于 它 5 
ect) ) jQuery 
focusout( handler(eventO 将 :函数 绑 定 到 "focusout" 事件 。 跟 blurO 区 别 在 于 它 . 
bject) ) ; jQuery 
submit() 由 发 每 一 个 匹配 元 素 的 submit 事件 jQuery 
submit(fn) 在 每 一 个 匹配 元 素 的 submit 事件 中 绑 定 一 个 处 理 函 数 jQuery 
unload(fn) 在 每 一 个 匹配 元 素 的 unload 事件 中 绑 定 一 个 处 理 函 数 jQuery 
load(fn) 在 每 一 个 匹配 元 素 的 load 事件 中 绑 定 一 个 处 理 函 数 jQuery 
error() 由 发 每 一 个 匹配 元 素 的 error 事件 jQuery 
错误 ee 在 每 一 个 匹配 元 素 的 error 事件 中 绑 定 一 个 处 理 函 数 。 这 个 广 二 
法 是 bindCerror, handler) 的 快捷 方式 ” 
keydown() 时 发 每 一 个 匹配 元 素 的 keydown 事件 jQuery 
keydown(fn) 在 每 一 个 匹配 元 素 的 keydown 事件 中 绑 定 一 个 处 理 函 数 jQuery 
键盘 “| keypress() 时 发 每 一 个 匹配 元 素 的 keypress 事件 jQuery 
事件 keypress(fn) 和 甘 每 一 个 匹配 元 素 的 keypress 事件 中 绑 定 一 个 处 理 函 数 jQuery 
keyupO 出发 每 一 个 匹配 元 素 的 keyup 事件 jQuery 
keyup(fn) 车 每 一 个 匹配 元 素 的 keyup 事件 中 绑 定 一 个 处 理 函 数 jQuery 
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分 类 方法 名 称 说 明 
mousedown(fn) 在 每 一 个 匹配 元 素 的 mousedown 事件 中 绑 定 一 个 处 理 函 数 
mouseenter(fn) 年 每 一 个 匹配 元 素 的 mouseenter 事件 中 绑 定 一 个 处 理 函 数 
mouseleave(fn) 甘 每 一 个 匹配 元 素 的 mouseleave 事件 中 绑 定 一 个 处 理 函 数 

mousemove(fn) 在 每 一 个 匹配 元 素 的 mousemove 事件 中 绑 定 一 个 处 理 函 数 
mouseout(fn) 在 每 一 个 匹配 元 素 的 mouseout 事件 中 绑 定 一 个 处 理 函 数 
mouseover(fn) 在 每 一 个 匹配 元 素 的 mouseover 事件 中 绑 定 一 个 处 理 函 数 
mouseup(fn) 在 每 一 个 匹配 元 素 的 mouseup 事件 中 绑 定 一 个 处 理 函 数 

妆 resize(fn) 在 每 一 个 匹配 元 素 的 resize 事件 中 绑 定 一 个 处 理 函 数 

操作 scroll(fn) 甘 每 一 个 匹配 元 素 的 scroll 事件 中 绑 定 一 个 处 理 函 数 

0 

分 类 方法 名 称 说 明 

show() 显示 所 有 匹配 的 元 素 











以 优雅 的 动画 显示 所 有 匹配 的 元 素 ， 并 在 显示 完成 后 可 选 地 
中 发 一 个 回调 函数 











show(speed,[callback]) 








hideO 隐藏 所 有 匹配 的 元 素 














义 优雅 的 动画 隐藏 所 有 匹配 的 元 素 ， 并 在 显示 完成 后 可 选 地 
由 发 一 个 回调 函数 














基本 hide(speed,[callback]) 














toggle() 团 换 元 素 的 可 见 状态 
显示 ， 为 false 隐藏 


= 





toggle( switch ) 在 switch 为 true 





























凡 从 关公 的 可 见 状 态 ， 并 在 每 一 次 动画 完成 
togele(speed, [callback]) ea ha i 并 在 每 一 次 动画 完成 后 


可 选 地 触发 一 个 回调 函数 


五 

















通过 高 度 变 | 来 动态 也 < 匹 秽 素 ， 
slideDown(speed,[callback]) pu J 度 变 化 《 名 下 增 大 ) 来 动态 显示 所 有 配 的 元 


显示 完成 后 可 选 地 触发 一 个 回调 函数 
































通过 高 度 变 化 向 上 减 小 ) 来 动态 地 隐藏 所 有 匹配 的 元 素 ， 


滑动 ”| slideUp(speed,[callback]) 吓 藏 裤 成 后 面 选 呈 甬 疼 一 个 回调 函 煞 



































过 高 度 变化 来 切换 所 有 匹配 元 素 的 可 见 性 ， 并 在 切换 完成 
|] 


slideToggle(speed,[callback]) [ 选 地 触发 一 个 回调 函数 








通过 不 透明 度 地 变化 来 实现 匹配 元 素 的 淡 入 效果 ， 并 在 
foliemtspecd [callbaciel) 0 六 地 变 化 来 实现 所 有 匹配 元 素 的 淡 入 效果 ， 并 在 


动画 完成 后 可 选 地 触发 一 个 回调 函数 



































过 不 透明 度 的 变化 来 实现 所 有 匹配 元 素 的 淡出 效果 ， 并 在 


沁 关 | peodlealbaelsD) 面 完成 后 可 选 地 触发 一 个 回调 函数 





















































淡出 fadeTo(speed,opacity,[call | 将 所 有 匹配 元 素 的 不 透明 度 以 渐进 方式 调整 到 指定 的 值 ， 并 
back]) 在 动画 完成 后 可 选 地 触发 一 个 回调 函数 












































fadeToggle( [ duration ], 酒 这 不 汲 肯 应 邮 恋 化 来 百 示 趟 陷 着 上 抑 机 于 雪 
[eaksin&j [ caliback] ) 通过 不 透明 度 地 变化 来 显示 或 隐藏 匹配 元 素 
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续 表 

分 类 方法 名 称 说 明 返 回 值 
animate(params[,duration[，| 四 二 人 十 白 立 加 而 的 下 当 
easing [,callback]]]) 于 创建 目 定义 动画 的 函数 jQuery 
animate(params,options) 于 创建 自 定义 动画 的 函数 jQuery 

定义 sto 

stop([clearQueue], i /上 下 大 放行 的 动 而 ; 
[gotoEnd]) 享 止 所 有 在 指定 元 素 上 正在 运行 的 动画 jQuery 
go oy urabon, 设置 一 个 延 时 来 推迟 执行 队列 中 之 后 的 项 jQuery 
[queueName ] ) 

jQuery.fx.off 用 于 全 面 禁 止 动画 执行 (效果 将 会 立刻 展现 出 来 》 Boolean 

设置 
jQuery.fx.interval 该 动画 的 频率 〈 以 毫秒 为 单位 ) Number 

分 类 方法 名 称 说 明 返回 值 
jQuery.ajax(options) 通过 HTTP 请 求 加 载 远 程 页 面 XMLHttpRequest 
load(url,[data],[callback]) | 载 入 远程 HTML 文件 代码 并 插入 至 DOM 中 jQuery 
jQuery.get(url,[data], 通过 HTTP GET 请 求 加 载 远 程 页 面 XMLHttpRequest 
[callback],[type]) 

ax jQuery.post(url,[data] 

:去 示 - 4 5 :站 ; 址 下川 盐 渤 租 历 

请 求 [callback],[type]) 通过 HTTP POST 请 求 加 载 远程 页 面 XMLHttpRequest 
jQuery.getJSON(url, ;省 ,二 二 起 et 
[data], [callback]) 通过 HTTP GET 请 求 载 入 JSON 数据 0 
ee 通过 HTTP GET 请 求 载 入 并 执行 一 个 Java Script 文件 XMLHttpRequest 
ajaxComplete(callback) Ajax 请 求 完 成 时 执行 函数 jQuery 
ajaxError(callback) Ajax 请 求 发 生 错 误 时 执行 函数 jQuery 

Ajax ajaxSend(callback) Ajax 请 求 发 送 前 执行 函数 jQuery 

事件 ajaxStart(callback) Ajax 请 求 开始 时 执行 函数 jQuery 
ajaxStop(callback) Ajax 请 求 结 束 时 执行 函数 jQuery 
ajaxSuccess(callback) 当 Ajax 请 求 成 功 后 执行 函数 jQuery 
jQuery.ajaxSetup(options) | 设置 全 局 Ajax 选项 无 

将 表单 元 素 的 名 称 和 值 序列 化 为 字符 串 数据 ， 返 回 值 类 似 ; 
serialize() a String 
于 : single=l&multiple=2 

其 他 将 表单 元 素 上 下 全 装机 本 

Ea a 各 表单 元 素 的 名 称 和 值 序列 化 〈 类 似 serialize() 方 法 )， 但 
serializeArray() 它 返回 的 是 JSON 数据 结构 Array<Object> 
jer paramt bi Y 创建 一 个 序列 化 的 数组 或 对 象 ， 适 用 于 一 个 URL 地 址 查 Strin 
jQueryp " 询 字 符 串 或 Ajax 请 求 
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分 类 方法 名 称 说 明 返回 类 型 
jery suppor 用 下 重 件 和 核心 开发 ， 方 便 了 解 不 同 浏览 器 的 特性 或 Object 
错误 。 
浏览 器 及 jQuery.browser 包含 由 navigator.userAgent 取得 的 标记 信息 Object 
特性 检测 jQuery.browser.version 卖 取 用 户 浏览 器 的 版 本 信息 String 
ee 人 用 户 浏览 天 针对 前 页 的 显示 是 否 基于 W3C CSS | 
jQuery.each(obj,callback) 通用 的 遍历 方法 ， 可 用 于 遍历 对 象 和 数组 Object 
jQuery.extend([deepl target.obi [obINI) Wd 展 一 个 对 象 ， 返 回 被 扩展 的 Object 
jQuery.grep(array,callback, [invert]) 使 用 过 滤 函 数 过 滤 数 组 元 素 Array 
jQuery.makeArray(obj) 将 一 个 类 似 数组 的 对 象 转化 为 数组 数组 Array 
数组 和 对 | jQuery.map(array,callback) 将 一 个 数组 中 的 元 素 转换 到 另 一 个 数组 中 Array 
象 操作 jQuery.inArray(value,array) 返回 value 在 数组 中 的 位 置 ， 如 果 没有 找到 ， 则 返回 -1 Number 
jQuery.merge(first second) 合并 两 个 数组 Array 
jQuery.unique(array) 删除 元 素数 组 中 的 重复 元 素 〈 不 能 用 于 普通 数组 ) Array 
jQuery.noopO) 传递 一 个 空 函数 Function 
: ; 接受 一 个 函数 ， 然 后 返回 一 个 新 函数 ， 并 且 这 个 新 : 
jQuery.proxy( function, context ) 函数 始终 保持 了 特定 的 上 下 文 语 境 Function 
jQuery.isArray( obj ) 检测 参数 是 否 为 数组 Boolean 
jQuery.isFunction(obj) 检测 对 象 是 否 为 function Boolean 
jQuery.type( obj ) 确定 JavaScript 对 象 的 类 型 String 
测试 操作 jQuery.isEmptyObject( object ) 检查 对 象 是 否 为 空 〈 不 包含 任何 属性 ) Boolean 
jQuery.isPlainObject( object ) ee 基 纯 粹 的 对 象 通 过 "{] 或 者 mew Boolean 
jQuery.isWindow( obj ) 确定 参数 是 否 为 一 个 窗口 (window 对 象 ) Boolean 
jQuery.isNumeric( value ) 确定 参数 是 否 是 一 个 数字 Boolean 
| jaueyaiman 去 掉 字 符 申 起 始 和 结尾 的 空格 String 
jQuery.param( obj ) 序列 化 表单 数组 或 对 象 〈 是 .serialize0 的 核心 代码 ) String 
URLs jQuery.parseJSON( json ) 0 JSON 字符 囊 ， 关 返回 解析 后 的 Object 
jQuery.parseXML( data ) 解析 一 个 字符 串 到 一 个 XML 文件 XMLDocument 
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on 2 方法 名 称 说 明 返回 类 型 
返回 元 素 上 储存 的 相应 名 字 的 数据 ， 可 以 用 data (name， 
data(name) het Any 
value) 来 设 定 
data(name,value) 在 元 素 上 存放 数据 ， 同 时 也 返回 value Any 
removeData(name) 从 元 素 上 移 除 存 放 的 数据 jQuery 
数据 功能 | queue0 获取 第 一 个 匹配 元 素 函 数 队 列 的 引用 (返回 一 个 函数 数组 ) | Array<Function> 
queue(callback) 在 匹配 元 素 的 函数 队列 末尾 添加 一 个 可 执行 函数 jQuery 
queue(queue) 将 匹配 元 素 的 函数 队列 用 一 个 新 的 队列 代替 《函数 数组 ) jQuery 
dequeue() 从 函数 队列 中 移 除 一 个 队列 函数 jQuery 
clearQueue( [queueName] ) 从 列队 中 移 除 所 有 未 执行 的 项 jQuery 
分 天 方法 名 称 说 明 返回 值 
currentTarget 在 事件 冒 泡 阶段 中 的 当前 DOM 元 素 Element 
data 当前 执行 的 处 理 器 被 绑 定 的 时 候 ， 包 含 可 选 的 数 A 
yr nything 
据 传 递 给 jQuery,fn.bind 
isDefaultPrevented() 根据 事件 对 象 中 是 否 调用 过 ee 
event.preventDefault() 方 法 来 返回 一 个 布尔 值 
isImmediatePropagationStopped() 根据 事件 对 象 中 是 否 调用 过 event.stopImmediate 
Propagation() 方 法 来 返回 一 个 布尔 值 
isPropagationStopped() 根据 事件 对 象 中 是 否 调用 过 eventstopPropagation0) ee 
方法 来 返回 一 个 布尔 值 
namespace 当 事 件 被 触发 时 此 属性 包含 指定 的 命名 空间 String 
pageX 鼠标 相对 于 文档 的 左边 缘 的 位 置 。 Number 
pageY 鼠标 相对 于 文档 的 顶端 边缘 的 位 置 。 Number 
事件 站 zs 
preventDefault() 阻 上 默认 事件 行为 的 触发 
relatedTarget 在 事件 中 涉及 的 其 它 任 何 DOM 元 素 Element 
result 这 个 属性 包含 了 当前 事件 最 后 触发 的 那个 处 人 
时 函数 的 返回 值 ， 除 非 值 是 undefined | 
stopImmediatePropagation() 阻止 剩余 的 事件 处 理 函 数 执行 并 且 防 止 事件 
晶 泡 到 DOM 树 上 
stopPropagation() [ 件 冒 泡 到 DOM 树 上 ， 也 就 是 不 触发 的 
茶 元 素 上 的 事件 处 理 函 数 
target 初 触发 事件 的 DOM 元 素 Element 
timeStamp 返回 事件 触发 时 距离 1970 年 1 月 1 日 的 毫秒 数 Number 
type 返回 事件 的 类 型 String 
which 针对 键盘 和 鼠标 事件 ， 返 回 点 击 的 键盘 值 或 鼠 Strin 
未 的 左 中 右 值 
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分 类 方法 名 称 说 明 返回 值 
当 延 迟 对 象 是 解决 或 拒绝 时 被 调用 添加 处 理 程序 Deferred 
[,alwaysCallbacks]) NS 和 A 
done(doneCallbacks) 添加 处 理 程序 被 调用 时 ， 延 迟 对 象 得 到 解决 Deferred 
fail(failCallbacks) 添加 处 理 程 序 被 调用 时 ， 延 迟 对 象 将 被 拒绝 Deferred 
isRejected() 确定 延迟 对 象 是 否 已 被 拒绝 Boolean 
isResolved() 确定 延迟 对 象 是 否 已 得 到 解决 Boolean 
notify( args ) 调用 一 个 给 定 args 的 延迟 对 象 上 的 进行 中 的 

Deferred 
回调 (progressCallbacks) 
notifyWith(context, [args]) 根据 给 定 的 上 下 文 和 args 延迟 对 象 上 调用 Detered 
progressCallbacks 
pipe([doneFilter] [, failFilter] [, es > af ji 用 碍 总 庆 汗 ; 
progressFilter] ) 筛选 器 和 /或 链 Deferreds 的 实用 程序 方法 。 Promise 
延迟 “| progress( progressCallbacks ) 当 延 迟 对 象 生成 进度 通知 时 添加 被 访问 处 理 程序 Deferred 
区 5 ei 
多 icject([args)) i 绝 延 迟 对 象 ， 并 根据 给 定 的 参数 调用 任何 失 
ne Sa Deferred 
败 的 回调 函数 
rejectWith(context, [args]) 6 绝 延迟 对 象 ， 并 根据 给 定 的 上 下 文 和 参数 调 ee 
ee eferre 
任何 失败 的 回调 函数 
resolve([args]) 解决 延迟 对 象 ， 并 根据 给 定 的 参数 调用 任何 完 Deferred 
成 的 回调 函数 
TesolveWith(context, [args]) 解决 延迟 对 象 ， 并 根据 给 定 的 上 下 文 和 参数 调 ed 
任何 完成 的 回调 函数 
state() 返回 延迟 对 象 的 当前 状态 String 
then(doneCallbacks, failCallbacks [， 添加 处 理 程序 被 调用 时 ， 延迟 对 象 得 到 解决 或 
progressCallbacks]) 者 拒绝 Deferred 
.promise([target]) 返回 一 个 Promise 对 象 用 来 观察 当 某 种 类 型 的 Promise 
所 有 行动 绑 定 到 集合 ,排队 与 否 还 是 已 经 完成 
个 3 全 下 3 国 厂 | 老式 | 日 品 Pp 
个 多 用 途 的 回调 列表 对 象 ， 提 供 了 强大 的 的 
jQuery.Callbacks( flags ) 方式 来 管理 回调 函数 列表 undefined 
callbacks.add( callbacks ) 回调 列表 中 添加 一 个 回调 或 回调 的 集合 undefined 
callbacks.disable() 禁用 回 计 undefined 
callbacks.empty() 从 列表 中 册 undefined 
回调 callbacks.fire( arguments ) 给 定 上 调 证 dnsd 

对 象 callbacks.fired() 确定 如 果 回 调 至 少 已 经 调用 一 次 Boolean 
callbacks.fireWith( [context] [, args] ) | 访问 给 定 的 上 下 文 和 参数 列表 中 的 所 有 回调 undefined 
callbacks.has( callback ) 确定 是 否 提供 的 回调 列表 Boolean 
callbacks.lock() 锁定 在 其 当前 状态 的 回调 列表 undefined 
callbacks.locked() 确定 是 否 已 被 锁定 的 回调 列表 Boolean 
callbacks.remove( callbacks ) 删除 回调 或 回调 回调 列表 的 集合 undefined 
































jQuery ， 质 名 思 义 ， 也 就 是 JavaScript 和 查询 ( Query ) ， 即 是 辅助 JavaSscript 开 发 的 库 。 


本 书 循序 渐进 地 对 jQuery 的 各 种 方法 和 使 用 技巧 进行 介绍 ， 读 者 可 以 系统 地 掌握 jQuery 中 关于 DOM 操 
作 、 事 件 监听 和 动画 效果 、 表 单 操作 、AJAX 以 及 插件 方面 的 知识 点 ， 并 结合 每 个 章节 后 面 的 案例 演示 
进行 练习 ， 达 到 掌握 各 章节 知识 点 ， 更 好 地 进行 开发 实践 的 目的 。 


jQuery 介绍 





























事件 和 动画 


EEC 一 > 








附录 : 

" jQuery 中 的 $(document).ready() 方 法 = jQuery 加 载 并 解析 XML 
”前端 开发 调试 工具 一 Firebug 。 插件 的 API 

a AJAX 的 核心 对 象 一 XMLHttpRequest "jQuery API 速 查 表 

= jQuery 中 的 $.ajax() 方 法 


本 书 官网 : http://cssrain.sinaapp.com 
提供 本 书 的 技术 支持 ， 发 布 最 新 的 勘误 结果 ， 并 可 下 载 全 书 的 示例 代码 。 
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分 类 建议 : 计算 机 / 网络 开 发 /程序 设计 
人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 此 封面 设计 ， 任 文 杰 





最 前 沿 的 类 电子 书 发 售 平 全 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹 
了 驹 稍 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 
体验 : 在 线 阅读 和 PDF。 
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相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
7 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 (即使 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进 
搜索、 剪贴 、 复 制 和 打印 。 
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最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 
合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 



































































































































































































































出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 

社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
i 过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
































































































































欢迎 加 入 


到 灵 社 区 























灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
i 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 
的 质量 。 
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最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 
误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社 区 
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你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 审 读 、 评 选 
等 多 种 活动 ， 万 取 积 分 和 银子 ， 积 累 个 人 声望 。 
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